[✔️]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 需要特别谨慎,因为一旦配置不当,可能会导致程序运行出错或者依赖模块无法加载。



目录
相关文章
|
4月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
846 58
|
5月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
434 9
|
11月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1979 1
|
8月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
865 5
|
10月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
10月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
182 1
|
10月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
11月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
800 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
236 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
158 1
JavaScript中的原型 保姆级文章一文搞懂

推荐镜像

更多
  • NPM