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

Question

我正在尝试使用JSPM，因此也在使用System 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这三种方法?

如果不能实现，有没有人推荐一个替代的模块加载库，可以同时支持这三种方法?

- rjbultitude

Answer 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对应于默认或导出的类型。（根据模块类型、公开内容和您想要使用的内容，可能需要一点学习曲线来确定导入什么。）

- Robb Vandaveer