@5punk/systemjs 中文文档教程
SystemJS
可配置的模块加载器,在浏览器和 NodeJS 中启用动态 ES 模块工作流。
SystemJS 目前由 Canopy Tax 赞助。
- Loads any module format when running the ~15KB development build.
- Loads ES modules compiled into the
System.register
module format for production with exact circular reference and binding support - Supports RequireJS-style map, paths, and bundles configuration.
使用 ES Module Loader 项目,它基于 WhatWG Loader 规范、HTML 和 NodeJS 中的模块的原则和 API。
如需讨论,请加入 Gitter Room。
Documentation
- Getting Started
- Module Formats
- Production Workflows
- Configuration API
- System API
- Plugins
- Creating Plugins
- Production Build and Resolution
Basic Use
Browser Development
<script src="systemjs/dist/system.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
以上将支持加载所有模块格式。
要使用浏览器内转译加载 ES6 代码,必须配置以下转译器插件之一:
Browser Production
当所有模块都可用作 system
、amd
或全局模块格式,并且不需要包配置或插件,可以使用仅限生产的加载器:
<script src="systemjs/dist/system-production.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
生产加载器中的配置支持包括 baseURL、路径、映射、depCache 和 wasm。
NodeJS
要在 NodeJS 中加载模块,请安装 SystemJS:
npm install systemjs
如果转译 ES 模块,请按照转译器项目页面中的说明安装转译器插件。
然后我们可以像在浏览器中一样在 NodeJS 中加载模块:
var SystemJS = require('systemjs');
// loads './app.js' from the current directory
SystemJS.import('./app.js').then(function (m) {
console.log(m);
});
要导入具有 NodeJS 模块分辨率的模块,请使用 import moduleName from '@node/module-name'
导入。
Running the tests
npm run build && npm run test
License
麻省理工学院
SystemJS
Configurable module loader enabling dynamic ES module workflows in browsers and NodeJS.
SystemJS is currently sponsored by Canopy Tax.
- Loads any module format when running the ~15KB development build.
- Loads ES modules compiled into the
System.register
module format for production with exact circular reference and binding support - Supports RequireJS-style map, paths, and bundles configuration.
Built with the ES Module Loader project, which is based on principles and APIs from the WhatWG Loader specification, modules in HTML and NodeJS.
For discussion, join the Gitter Room.
Documentation
- Getting Started
- Module Formats
- Production Workflows
- Configuration API
- System API
- Plugins
- Creating Plugins
- Production Build and Resolution
Basic Use
Browser Development
<script src="systemjs/dist/system.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
The above will support loading all module formats.
To load ES6 code with in-browser transpilation, one of the following transpiler plugins must be configured:
Browser Production
When all modules are available as either system
, amd
or global module formats, and no package configurations or plugins are needed, a production-only loader can be used:
<script src="systemjs/dist/system-production.js"></script>
<script>
SystemJS.import('/js/main.js');
</script>
Configuration support in the production loader includes baseURL, paths, map, depCache and wasm.
NodeJS
To load modules in NodeJS, install SystemJS with:
npm install systemjs
If transpiling ES modules, install the transpiler plugin following the instructions from the transpiler project page.
We can then load modules equivalently in NodeJS as we do in the browser:
var SystemJS = require('systemjs');
// loads './app.js' from the current directory
SystemJS.import('./app.js').then(function (m) {
console.log(m);
});
To import a module with the NodeJS module resolution, import with import moduleName from '@node/module-name'
.
Running the tests
npm run build && npm run test
License
MIT