0.10.1 • Published 6 months ago
vite-plugin-commonjs v0.10.1
vite-plugin-commonjs
A pure JavaScript implementation of CommonJs
English | 简体中文
✅ alias
✅ bare module(node_modules)
✅ dynamic-require similar to 👉 Webpack require('./foo/' + bar)
Usage
import commonjs from 'vite-plugin-commonjs'
export default {
plugins: [
commonjs(/* options */),
]
}
API (Define)
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
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
✅ require statement
// 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
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
├─┬ src
│ ├─┬ views
│ │ ├─┬ foo
│ │ │ └── index.js
│ │ └── bar.js
│ └── router.js
└── vite.config.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);
}
}
0.10.1
6 months ago
0.10.0
7 months ago
0.9.0
9 months ago
0.8.1
10 months ago
0.8.0
11 months ago
0.8.2
10 months ago
0.7.1
12 months ago
0.6.2
1 year ago
0.7.0
1 year ago
0.5.3
2 years ago
0.6.1
1 year ago
0.6.0
1 year ago
0.5.0
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.3.0
2 years ago
0.4.5
2 years ago
0.4.4
2 years ago
0.4.7
2 years ago
0.4.6
2 years ago
0.4.1
2 years ago
0.3.2
2 years ago
0.4.0
2 years ago
0.3.1
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.2.6
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.1.5
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.0
3 years ago
0.0.1
3 years ago