# vite-plugin-commonjs

> A pure JavaScript implementation of CommonJs

Latest version **0.10.4** (published 2024-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-commonjs
pnpm add vite-plugin-commonjs
yarn add vite-plugin-commonjs
bun add vite-plugin-commonjs
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.4 |
| Published | 2024-11-21 |
| First published | 2021-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 138 |
| Author | 草鞋没号 |
| Maintainers | younglei, caoxie |
| Keywords | vite, plugin, commonjs, require |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-commonjs
- Repository: https://github.com/vite-plugin/vite-plugin-commonjs
- Homepage: https://github.com/vite-plugin/vite-plugin-commonjs#readme
- Issues: https://github.com/vite-plugin/vite-plugin-commonjs/issues
- npm.io page: https://npm.io/package/vite-plugin-commonjs

## Dependencies (3)

- [acorn](https://npm.io/package/acorn.md) ^8.12.1
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.11
- [vite-plugin-dynamic-import](https://npm.io/package/vite-plugin-dynamic-import.md) ^1.6.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.10.4 (latest) — 2024-11-21
- 0.10.3 — 2024-09-16
- 0.10.2 — 2024-09-15
- 0.10.1 — 2023-11-14
- 0.10.0 — 2023-10-08
- 0.9.0 — 2023-08-26
- 0.8.2 — 2023-07-17
- 0.8.1 — 2023-07-12
- 0.8.0 — 2023-06-24
- 0.7.1 — 2023-05-14
- 0.7.0 — 2023-04-30
- 0.6.2 — 2023-03-12
- 0.6.1 — 2022-12-10
- 0.6.0 — 2022-11-27
- 0.5.3 — 2022-10-16
- … 28 more at https://npm.io/package/vite-plugin-commonjs/versions

## README

# vite-plugin-commonjs
A pure JavaScript implementation of CommonJs

[![NPM version](https://img.shields.io/npm/v/vite-plugin-commonjs.svg?style=flat)](https://npmjs.org/package/vite-plugin-commonjs)
[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-commonjs.svg?style=flat)](https://npmjs.org/package/vite-plugin-commonjs)

English | [简体中文](https://github.com/vite-plugin/vite-plugin-commonjs/blob/main/README.zh-CN.md)

✅ alias  
✅ bare module(node_modules)  
✅ dynamic-require similar to 👉 [Webpack](https://webpack.js.org/guides/dependency-management/#require-with-expression) `require('./foo/' + bar)`

## [Elaborate on Vite building CommonJS issues](./commonjs.zh-CN.md)

## Usage

```js
import commonjs from 'vite-plugin-commonjs'

export default {
  plugins: [
    commonjs(/* options */),
  ]
}
```

## API <sub><sup>(Define)</sup></sub>

```ts
export interface CommonjsOptions {
  filter?: (id: string) => boolean | undefined
  dynamic?: {
    /**
     * 1. `true` - Match all possibilities as much as possible, more like `webpack`
     * 2. `false` - It behaves more like `@rollup/plugin-dynamic-import-vars`
     * @default true
     */
    loose?: boolean
    /**
     * If you want to exclude some files  
     * e.g.
     * ```js
     * commonjs({
     *   dynamic: {
     *     onFiles: files => files.filter(f => f !== 'types.d.ts')
     *   }
     * })
     * ```
    */
    onFiles?: (files: string[], id: string) => typeof files | undefined
  }
  advanced?: {
    /**
     * Custom import module interop behavior.
     * 
     * If you want to fully customize the interop behavior, 
     * you can pass a function and return the interop code snippet.
     */
    importRules?: ImportInteropType | ((id: string) => ImportInteropType | string)
  }
}
```

#### node_modules

```js
commonjs({
  filter(id) {
    // `node_modules` is exclude by default, so we need to include it explicitly
    // https://github.com/vite-plugin/vite-plugin-commonjs/blob/v0.7.0/src/index.ts#L125-L127
    if (id.includes('node_modules/xxx')) {
      return true
    }
  }
})
```

## Cases

[vite-plugin-commonjs/test](https://github.com/vite-plugin/vite-plugin-commonjs/tree/main/test)

✅ require statement

```js
// Top-level scope
const foo = require('foo').default
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import foo from 'foo'

const foo = require('foo')
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import * as foo from 'foo'

const foo = require('foo').bar
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import * as __CJS_import__0__ from 'foo'; const { bar: foo } = __CJS_import__0__

// Non top-level scope
const foo = [{ bar: require('foo').bar }]
↓
import * as __CJS_import__0__ from 'foo'; const foo = [{ bar: __CJS_import__0__.bar }]
```

✅ exports statement

```js
module.exports = fn() { }
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const __CJS__export_default__ = module.exports = fn() { }
export { __CJS__export_default__ as default }

exports.foo = 'foo'
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const __CJS__export_foo__ = (module.exports == null ? {} : module.exports).foo
export { __CJS__export_foo__ as foo }
```

✅ dynamic-require statement

*We assume that the project structure is as follows*

```tree
├─┬ src
│ ├─┬ views
│ │ ├─┬ foo
│ │ │ └── index.js
│ │ └── bar.js
│ └── router.js
└── vite.config.js
```

```js
// router.js
function load(name: string) {
  return require(`./views/${name}`)
}
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
import * as __dynamic_require2import__0__0 from './views/foo/index.js'
import * as __dynamic_require2import__0__1 from './views/bar.js'
function load(name: string) {
  return __matchRequireRuntime0__(`./views/${name}`)
}
function __matchRequireRuntime0__(path) {
  switch(path) {
    case './views/foo':
    case './views/foo/index':
    case './views/foo/index.js':
      return __dynamic_require2import__0__0;
    case './views/bar':
    case './views/bar.js':
      return __dynamic_require2import__0__1;
    default: throw new Error("Cann't found module: " + path);
  }
}
```

---
_Source: https://npm.io/package/vite-plugin-commonjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._