引入第三方包logicflow报错,源码中又引入了第三方npm包ids,报错如图
打印了 require引入没问题,直接
new ids_1()
也没问题,
问题是default为什么会找不到
思考如下:
首先为什么会找defult属性?
es在编译成cjs时,export default 会编译成 exports.defult,defult会变成exports的一个属性。
引入的npm包logicflow extension 是esm写法编译成cjs,源码写了import Ids from 'ids';
相当于cjs的默认导入,编译后就会变成一个对象的default属性
而引入的ids也作为我的第三方插件包也是编译好的cjs,模块本身导出就是module.exports={}
。
看源码报错中,其中_webpack_require__ 类似于 require,直接返回目标模块的 module.exports 对象,所以去找default属性找不到。
参考原文:
思考:且不说npm包书写方式是否存在问题,经过测试的其他人引用为何没有问题,猜测是自己项目的构建方式
npm包发布是同时带有cjs和es的,如何让在浏览器环境下不引用npm包的cjs, 概念参考文章 zhuanlan.zhihu.com/p/548202395
项目里
// 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件 mainFields: ['jsnext:main', 'browser', 'main'],
Webpack 会根据 mainFields
的配置去决定优先采用那份代码;Webpack 会按照数组里的顺序去package.json
文件里寻找,只会使用找到的第一个。
现在刚出的npm包的packjson里都不配置jsnext:main了,只配置
"main": "cjs/index.js", "module": "es/index.js",
未找到jsnext:main下面的browser属性默认找main属性,引入cjs文件报错
解决
在mainFields加入了module属性
mainFields: ['jsnext:main', 'module', 'browser', 'main'],
有错误欢迎指正.