[✔️]cocos creator 2.x无法加载.js后缀的npm包

简介: [✔️]cocos creator 2.x无法加载.js后缀的npm包

svg.js这个包无法正常使用 追踪堆栈发现,这这一步还是正常的


image.png


到这一步就发现把.js后缀给干掉了


image.png


中间处理的这一步,代码加密了,可能认为这是个js文件,所以就强行把.js去掉了,没有考虑到有些npm package竟然也以.js结尾


image.png


解决方案:


  1. 自己把这个package改名,在npm上重新发布一下,项目中使用改名后的package
  2. 如果使用的是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',
    // ...
  },
};


其中,键是需要排除的模块名,值是模块在全局环境中的变量名。例如,上面的配置表示将 jqueryreact 排除在打包范围之外,而在运行时从全局环境中获取它们。


还有一种更高效的用法是使用正则表达式来匹配模块名,例如:


module.exports = {
  // ...
  externals: {
    '/^lib/': 'commonjs2 lib',
    // ...
  },
};


这个配置将所有以 lib/ 开头的模块都排除在打包范围之外。


externals 的另一个常见用途是在不同的构建中共享某些模块。例如,我们可以将大部分代码打包成一个 vendor bundle,然后再将一些常用的库(如reactlodash 等)排除在构建范围之外。这样可以缩短编译时间,同时也能使得这些库被多个入口共享,从而减小网页加载时间。


需要注意的是,使用 externals 需要特别谨慎,因为一旦配置不当,可能会导致程序运行出错或者依赖模块无法加载。



目录
相关文章
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
345 2
|
11月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
1058 9
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
1472 5
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
505 3
npm学习一:npm 包管理工具 学习、使用。
|
数据安全/隐私保护
发布一个npm包
发布一个npm包
427 2
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
1322 0
|
缓存 JavaScript 前端开发
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
这篇文章介绍了如何解决npm版本与Node.js版本不兼容的问题,提供了查看当前npm和Node.js版本的步骤,以及如何根据Node.js版本选择合适的npm版本并进行升级的详细指导。
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
356 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
283 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
173 0

推荐镜像

更多
  • NPM