配置@rollup/plugi-commonjs插件处理混合模块

267 阅读1分钟

基础环境

rollup ^3.0.0

rollup的treeshake

测试包为lodash-es。

rollup的treeshake默认是开启的。

测试:将rollup的treeshake关闭

treeshake:false,重新打包后的文件大小为504KB

treeshake:true,重新打包后的文件大小为6KB

rollup插件rollup-plugin-delete,在bundling之前删除指定文件或文件夹

rollup插件rollup-plugin-commonjs

报错:RollupError: "default" is not exported by "node_modules/lodsh/isPlainObject.js"

使用@rollup/plugin-commonjs替换rollup-plugin-commonjs

报错: RollupError: "TreeNode" is not exported by "node_modules/ant-design-vue/es/vc-tree/index.js"。

解决方案:

使用@rollup/plugin-commonjs替换rollup-plugin-commonjs

使用@rollup/plugin-node-resolve替换rollup-plugin-node-resolve

参考:https:/rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module

@rollup/plugi-commonjs插件配置如下:

const commonjs = require('@rollup/plugi-commonjs')

plugins: [
    commonjs({
        include: ['node_modules/**'],
        exclude: ['node_modules/lodash-es', 'node_modules/antd/**']
    })
]

一个esm文件中使用了require,导致require的文件未被引入。

修改@rollup/plugi-commonjs插件配置如下

const commonjs = require('@rollup/plugi-commonjs')

plugins: [
    commonjs({
        include: ['node_modules/**'],
        exclude: ['node_modules/lodash-es', 'node_modules/antd/**'],
        transformMixedEsModules: true //  混合模块转换
    })
]

transformMixedEsModules

类型:布尔

默认值:false

指示插件是否启用混合模块转换。这在包含ES导入语句和CommonJS require表达式的模块混合的场景中很有用。如果require调用应转换为混合模块中的导入,则设置为true,如果require表达式应在转换后继续存在,则设置成false。如果代码包含环境检测,或者您正在为对ElectronJS等require调用进行特殊处理的环境进行编码,则后者可能很重要。另请参见“忽略”选项。