一、前言

Cocos Creator 3.x 中對(duì)于模塊有特別的描述，詳細(xì)可以見(jiàn)官方文檔

• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/spec.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/engine.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/config.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/example.html

針對(duì)新引進(jìn)的模塊，有一些特別需要注意的點(diǎn)：

1. Cocos Creator 不是運(yùn)行在 NodeJs 環(huán)境中
2. 基于上面這一點(diǎn)，如果我們通過(guò) npm/yarn 引入的庫(kù)，其本身又引入了 NodeJs 的標(biāo)準(zhǔn)庫(kù)時(shí)，則無(wú)法運(yùn)行（如：crypto-js 本身依賴了 NodeJs 的 crypto 模塊）

二、引入 crypto-js 的現(xiàn)狀

在論壇中，可以搜索到很多關(guān)于 3.x 導(dǎo)入 npm 包的一些問(wèn)題帖子，對(duì)于 crypto-js 的引入的求助也有相關(guān)帖子：

• https://forum.cocos.org/t/topic/107562
• https://forum.cocos.org/t/topic/110499

目前結(jié)論是：Cocos Creator 3.x 目前不能導(dǎo)入 crypto-js 。 原因正如前言所說(shuō)：

1. Cocos Creator 不是運(yùn)行在 NodeJs 環(huán)境中
2. crypto-js 本身依賴了 NodeJs 的 crypto 模塊

image.png

image.png

當(dāng)然，這也不是最終結(jié)論 ，在未來(lái)一些情況下，我們還是可以使用 crypto-js：

1. CC 官方后續(xù)還有npm庫(kù)引入方面的優(yōu)化工作
2. 針對(duì) crypto-js 進(jìn)行一些 回退處理

image.png

三、引入 crypto-ts

基于上面兩個(gè)章節(jié)，如果我們還是需要使用 crypto-js，目前我們可能不得不使用 crypto-ts 進(jìn)行替代。這個(gè)庫(kù)在 我能否在 Cocos Creator 中使用 npm 包 的文檔中，也得到了明確的支持：

image.png

但是細(xì)心的你如果打開(kāi)了 npm 倉(cāng)庫(kù)上 crypto-ts/crypto-js 的說(shuō)明，就留意到一個(gè)事實(shí)

image.png

image.png

crypto-js 目前還在維護(hù)，而 crypto-ts 已經(jīng)很久沒(méi)維護(hù)了，最近一個(gè)版本還是3年前，在 crypto-ts 的 github 倉(cāng)庫(kù)中也有一些 issue 以及 pull request 等等。那么針對(duì) crypto-ts 3年沒(méi)發(fā)新版本的這個(gè)情況，可能帶來(lái)哪些影響呢：

1. crypto-ts 內(nèi)置了 Base64 ，但是沒(méi)有導(dǎo)出，沒(méi)法使用，如: PR
2. crypto-ts 內(nèi)置了 Md5，但是沒(méi)有導(dǎo)出，沒(méi)法使用
3. AES 的支持情況：

• 塊加密模式
  • CBC：OK
  • ECB：OK
  • CFB、CTR、OFB：NO
  • ...
• 填充模式：
  • NoPadding：OK
  • PKCS8：OK
  • ZeroPadding：NO
  • ...

4. ...

針對(duì)這些影響，我們?cè)谑褂胏rypto-ts之前最好根據(jù)自己的項(xiàng)目進(jìn)行分析，考慮是否合適使用

當(dāng)然，有一些影響，我們還是可以自己進(jìn)行一些小改動(dòng)，比如第1、2點(diǎn)，我們還可以自己 fork 原項(xiàng)目下來(lái)進(jìn)行小修改。比如，我這邊就 fork下來(lái)原項(xiàng)目 ，導(dǎo)出了內(nèi)置的Base64、MD5：

image.png

如果要在你的項(xiàng)目中使用這部分導(dǎo)出的API，那么可以這樣子操作：

1. 在你的游戲項(xiàng)目中，下載原版的 crypto-ts ： npm i crypto-ts
2. 在另外的目錄，下載基于原版 crypto-ts 項(xiàng)目進(jìn)行修改（新增導(dǎo)出）的項(xiàng)目https://github.com/zhitaocai/crypto-ts ： git clone git@github.com:zhitaocai/crypto-ts.git crypto-ts-custom
3. 在下載后的項(xiàng)目（crypto-ts-custom）中 npm i
4. 在下載后的項(xiàng)目（crypto-ts-custom）中 npm run build 后，得到 dist 目錄
5. 將得到的 dist 目錄替換到你們游戲項(xiàng)目的 node_modules/crypto-ts 中即可

這樣子之后，就可以愉快使用 crypto-ts 中的 base64 和 md5 了

import CryptoJS from "crypto-ts";

/**
 * @see https://github.com/hmoog/crypto-ts
 */
export class CryptoWrapper {
    /**
     * Base64 編碼
     * @param text 原始字符串
     */
    static base64Encode(text: string) {
        return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(text));
    }

    /**
     * Base64 解碼
     * @param text 編碼字符串
     */
    static base64Decode(text: string) {
        return CryptoJS.enc.Base64.parse(text).toString(CryptoJS.enc.Utf8);
    }

    /**
     * md5
     * @param text 字符串
     */
    static md5(text: string) {
        return CryptoJS.MD5(text).toString();
    }
}

四、后續(xù)展望

最好還是可以直接采用 crypto-js 這個(gè)更完善的庫(kù)

參考文獻(xiàn)

• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/spec.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/engine.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/config.html
• https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/example.html
• https://forum.cocos.org/t/topic/107562
• https://forum.cocos.org/t/topic/110499
• https://shrinktofit.github.io/can-i-use-npm-in-cocos-creator
• https://forum.cocos.org/t/topic/120650/9