示例:外部模块使用案例

ES6 导入导出案例

// foo.js
module.exports = {
  a: 1,
  b: 2,
};

module.exports.c = 3;

// test.mjs

// default 指向 module.exports
import foo from "./foo.js"; // 等价于 import { default as foo } from './foo.js'
console.log(JSON.stringify(foo)); // {"a":1,"b":2,"c":3}

// 导入 foo 模块的所有导出
import * as module_foo from "./foo.js";
console.log(JSON.stringify(module_foo)); // {"c":3,"default":{"a":1,"b":2,"c":3}}

import { a } from "./foo.js";
console.log(a); // Error: a is not defined

// 根据上方第三点，c 有独立导出
import { c } from "./foo.js";
console.log(c); // 3

npm 模块使用案例

• protobufjs 案例

安装

pnpm i protobufjs

使用

脚本里面引入

首先，在 assets 下创建一个 test.ts 脚本。接着，在脚本的头部写入下列代码：

// 大部分 npm 模块都可以通过直接导入模块名的方式来使用。
import protobufjs from "protobufjs";
console.log(protobufjs);

TS 设置

当在 TypeScript 里导入没有默认导出的模块时，通常会出现

注意

Module '"/${project_path}/protobufjs"' has no default export.

• 解决办法:

注意

这是因为目前 protobufjs 仅提供了 CommonJS 模块，而 Cocos Creator 是通过 “默认导入” 来访问 CommonJS 模块的，但是 CommonJS 模块确实没有 “默认导出” 这种说法。

此时，可以通过编辑项目目录中的 tsconfig.json 文件，将 "compilerOptions" 字段中的 "allowSyntheticDefaultImports" 选项设置为 true。如果没有该字段，可以自行补上。

• 代码如下:

{
  /* Base configuration. Do not edit this field. */
  "extends": "./temp/tsconfig.cocos.json",

  "compilerOptions": {
    "allowSyntheticDefaultImports": true // 需要开启
  }
}