如何将 ES6、AMD 和 CJS 模块与 JSPM 和系统 js 一起使用？

Posted 2023-02-19

【中文标题】如何将 ES6、AMD 和 CJS 模块与 JSPM 和系统 js 一起使用？

【英文标题】：How to use ES6, AMD and CJS modules together with JSPM and system js?

【发布时间】：2015-10-06 23:25:18

【问题描述】：

我正在尝试 JSPM，然后是系统 JS，因为我觉得在我的应用程序中使用 ES6 功能（例如模块）有很多价值。但是，我希望能够同时使用 CJS 和 AMD 管理我的模块。这是我试图加载和运行 CJS 模块和 ES6 模块的主应用程序文件中的代码示例：

//CJS
var cjsmodule = require('./modules/cjs-module');
var cjs = cjsmodule();
cjs.init();

//ES6
import  square  from './modules/es6-module';
console.log(square(11));

但我得到了错误

Potentially unhandled rejection [2] TypeError: require is not a function 

如果我只使用一种方法，应用程序运行时不会出错。有谁知道是否可以使用 JSPM 让 ES6、CJS 和 AMD 一起存在于同一个应用程序中？

如果做不到这一点，谁能推荐一个同时支持所有三种方法的替代模块加载器库？

【参考方案1】：

这是一个老问题，但我在尝试弄清楚如何使用几个不同模块样式的包时发现了它。希望这个答案可以节省一些时间。

JSPM 可以处理多种格式的包：CommonJS、AMD、ECMA2016 模块和全局。当你安装你的包时，你可以指定一个覆盖来告诉 JSPM 如何加载你的包，例如jspm install npm:your-mad-package-name-here -o "format: 'cjs|amd|esm|global'" 其中单引号中的值对应于包的依赖类型。然后，使用包公开的类型只需导入它们，import typeNameHere from "your-amd-package-name-here"; 其中 typeNameHere 对应于默认或导出的类型。 （根据模块类型、公开的内容以及您想要使用的内容，关于要导入的内容可能会有一点学习曲线。）