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

基础环境

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插件配置如下:

js 复制代码
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插件配置如下

js 复制代码
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调用进行特殊处理的环境进行编码,则后者可能很重要。另请参见"忽略"选项。

相关推荐
学前端搞口饭吃1 分钟前
React props的使用
前端·javascript·react.js
灵感__idea24 分钟前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛26 分钟前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒28 分钟前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As331001037 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱1 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖1 小时前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
切糕师学AI1 小时前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo4 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip9 小时前
Jst执行上下文栈和变量对象
前端·javascript