svg.js
这个包无法正常使用 追踪堆栈发现,这这一步还是正常的
到这一步就发现把.js后缀给干掉了
中间处理的这一步,代码加密了,可能认为这是个js
文件,所以就强行把.js
去掉了,没有考虑到有些npm package竟然也以.js
结尾
解决方案:
- 自己把这个package改名,在npm上重新发布一下,项目中使用改名后的package
- 如果使用的是webpack打包,可以在配置中加入externals,也就是将svg.js不排除,代码直接打进bundle里面,运行的时候不会从外部require,也就避免了这个问题
cc-plugin就是使用的externals,将.js结尾的package不排除,直接打进bundle里面
webpack externals
在 Webpack 中,externals
是一个配置项,用于指定哪些模块不应被打包进输出的 bundle 文件中,而应该作为外部依赖引入。这能够显著减小 bundle 文件的大小,加快网页加载速度,同时也可以避免代码重复。
在配置文件中,externals
可以是一个对象、函数,或者一个字符串。其通常的形式如下:
module.exports = { // ... externals: { 'jquery': 'jQuery', 'react': 'React', // ... }, };
其中,键是需要排除的模块名,值是模块在全局环境中的变量名。例如,上面的配置表示将 jquery
和 react
排除在打包范围之外,而在运行时从全局环境中获取它们。
还有一种更高效的用法是使用正则表达式来匹配模块名,例如:
module.exports = { // ... externals: { '/^lib/': 'commonjs2 lib', // ... }, };
这个配置将所有以 lib/
开头的模块都排除在打包范围之外。
externals
的另一个常见用途是在不同的构建中共享某些模块。例如,我们可以将大部分代码打包成一个 vendor bundle,然后再将一些常用的库(如react
、lodash
等)排除在构建范围之外。这样可以缩短编译时间,同时也能使得这些库被多个入口共享,从而减小网页加载时间。
需要注意的是,使用 externals
需要特别谨慎,因为一旦配置不当,可能会导致程序运行出错或者依赖模块无法加载。