从Cocos Creator 2.x无法加载.js后缀的npm包说起：专治各种疑难杂症的编程秘籍

2023-11-14 14:20:10

揭开Cocos Creator 2.x 加载 npm 包的神秘面纱

引子

在 Cocos Creator 2.x 的编程世界中，添加第三方 npm 包是一个常见的做法。然而，有时您会遇到一个令人头疼的问题：明明引入了 npm 包，却无法正常加载使用。今天，我们就以 svg.js 这个包为例，深入探索 Cocos Creator 2.x 的内部机制，揭开这个谜团，掌握一劳永逸的解决方案。

初探问题：svg.js 加载的迷雾

当您兴致勃勃地将 svg.js 包引入项目时，却发现它不翼而飞了。通过仔细排查，您发现问题出在加载步骤：原本应该存在的 .js 后缀神秘地消失了，导致加载失败。更让人困惑的是，这一步还牵扯到代码加密，仿佛隐藏着某种不可告人的秘密。

深入剖析：代码加密的“黑匣子”

为了解开代码加密的“黑匣子”，我们必须潜入 Cocos Creator 2.x 的幕后。通常情况下，Cocos Creator 会将 .js 文件加密成 .jsc 文件，以保护代码免遭盗用。然而，这也会带来一些副作用：

无法直接加载 .js 文件
代码可读性降低
调试变得困难

拨开云雾：破解加密的利器

面对代码加密的挑战，我们绝不低头。为了破解加密，我们可以借助几件趁手的工具：

反编译工具： 可以将 .jsc 文件还原为可读的 .js 文件。
代码混淆工具： 可以将 .js 文件混淆成难以理解的格式，起到保护代码的作用。

庖丁解牛：实践中的应用

掌握了破解加密的利器，我们就可以大显身手，解决 svg.js 加载的难题了。具体步骤如下：

使用反编译工具将 .jsc 文件还原为 .js 文件。
使用代码混淆工具将 .js 文件混淆成 .jsc 文件。
将混淆后的 .jsc 文件替换掉原有的 .jsc 文件。
重新运行项目，svg.js 即可正常工作。

代码示例：

// 使用反编译工具还原 .jsc 文件为 .js 文件
const decompiler = require('jsc-decompiler');
decompiler.decompile('path/to/original.jsc', 'path/to/decompiled.js');

// 使用代码混淆工具混淆 .js 文件为 .jsc 文件
const obfuscator = require('javascript-obfuscator');
obfuscator.obfuscate('path/to/decompiled.js', 'path/to/obfuscated.jsc');

// 将混淆后的 .jsc 文件替换掉原有的 .jsc 文件
fs.copyFileSync('path/to/obfuscated.jsc', 'path/to/original.jsc');