在cocos creator 中使用任意npm包

Creator 3.x
#1

思路
将npm包打包成esm单文件 然后使用 import-map 重定向

支持版本
理论上2.x 3.x都支持

借助工具 vite
以 @vue/reactivity 为例
先装包 npm install vite @vue/reactivity
在根目录创建 vite.config.ts

// vite.config.ts
import { defineConfig, LibraryFormats } from "vite"
import { existsSync, readFileSync, writeFileSync } from "fs"

const packages = {
  '@vue/reactivity': './node_modules/@vue/reactivity'
}
export default defineConfig(() => {
  return {
    define: { 'process.env.NODE_ENV': '"production"' },
    build: {
      lib: {
        entry: packages,
        formats: ['es'] as LibraryFormats[],
      },
      rollupOptions: {
      },
      outDir: 'assets/script/lib',
    },
    plugins: [
      {
        name: 'local',
        closeBundle() {
          let importMap = { imports: {} }
          if (existsSync('./import-map.json')) {
            importMap = JSON.parse(readFileSync('./import-map.json').toString())
          }
          if (!importMap.imports) {
            importMap.imports = {}
          }
          Object.keys(packages).forEach(item => {
            importMap.imports[item] = `./assets/script/lib/${item}.mjs`
          })
          writeFileSync('./import-map.json', JSON.stringify(importMap, undefined, 2))
        },
      }
    ]
  }
})

package.json 加入以下代码 这样在每次装包后都会自动build一下

  "scripts": {
    "postinstall": "vite build"
  },

最后别忘了配置项目 import-map

现在可以在项目代码中愉快的使用 import { ref } from "@vue/reactivity"

2赞