【翻译】SystemJS overview，SystemJS 概览

Loading Modules

加载模块

Any URL can be loaded as a module with standard URL syntax:

任何符合标准语法的 URL 都可以被作为模块加载：

<script src="system.js"></script>
<script>
  // loads relative to the current page URL
  System.import('./local-module.js'); 

  // load from an absolute URL directly
  System.import('https://code.jquery.com/jquery.js');
</script>

Any type of module format can be loaded and it will be detected automatically by SystemJS.

任何类型的模块格式都可以被 SystemJS 加载并自动检测。

File access from files

从文件中访问

Note that when running locally, ensure you are running from a local server or a browser with local XHR requests enabled. If not you will get an error message.

注意，当在本地运行时，确保你运行在一个本地服务或支持本地 XHR 请求的浏览器中。否则你将会得到一个错误信息。

For Chrome on Mac, you can run it with: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &> /dev/null &

对于 Max 中的 Chrome，你可以使用 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &> /dev/null & 运行它。

_In Firefox this requires navigating to about:config, entering security.fileuri.strict_origin_policy in the filter box and toggling the option to false._

在 Firefox 中需要导航到 about:config，在筛选框中输入 security.fileuri.strict_origin_policy 并将其设置为 false。

Loading ES6

加载 ES6

app/es6-file.js:

  export class q {
    constructor() {
      this.es6 = 'yay';
    }
  }

  <script>
    System.import('./app/es6-file.js').then(function(m) {
      console.log(new m.q().es6); // yay
    });
  </script>

ES6 modules define named exports, provided as getters on a special immutable Module object.

ES6 模块定义叫做 export，为一个特殊的不可变的“模块”对象提供类似 getter 的访问途径。

Read more about ES6 modules and syntax.

阅读更多关于 ES6 模块和语法

To build for production, see the production workflows.

为生产环境构建，查看生产环境工作流

Read more about SystemJS module format support.

阅读更多关于 SystemJS 支持的模块格式

Loader Configuration

加载器配置

Some of the standard configuration options and their use cases are described below.

一些标准的配置选项与它们的使用案例描述如下。

For a reference see the Config API page.

需要参考可以查看 Config API 页面。

baseURL

The baseURL provides a special mechanism for loading modules relative to a standard reference URL.

baseURL 提供一种相对于标准 URL 方式的特殊的加载模块机制。

This can be useful for being able to refer to the same module from many different page URLs or environments:

当许多不同的页面 URL 或环境指向同一个模块时，这会十分有用。

System.config({
  baseURL: '/modules'
});

// loads /modules/jquery.js
System.import('jquery.js');

Module names of the above form are referred to as plain names and are always loaded baseURL-relative instead of parentURL relative like one would expect with ordinary URLs.

上述形式的模块名字变成了一个普通的名字，而且加载总是与 baseURL 相关而不是 parentURL，就如同人们期望的一个普通 URL。

Note we always run the System.config function instead of setting instance properties directly as this will set the correct normalized baseURL in the process.

注意，我们通常运行 System.config 方法以避免直接设置实例属性，因为这样才能在进程中设置正确的 baseURL。（译者注：这句可以理解为 System.config 方法的运行过程中会根据 baseURL 的配置设置一些相关的属性和值，直接在实例的属性上修改 baseURL 值达不到这个效果。）

Map Config

The baseURL is very useful for providing an absolute reference URL for loading all modules, but we don't necessarily want to have to locate every single shared dependency from within one folder.

baseURL 在使用一种绝对路径 URL 加载所有模块时十分有用，但我们不一定要从一个文件夹中定位每一个单独共享的依赖。

Sometimes we want to load things from different places.

有时我们希望能从不同的地方加载东西。

Map configuration is useful here to be able to specific exactly where to locate a given package:

Map 配置项对于指定从什么地方定位一个给到的包十分有用：

System.config({
  map: {
    jquery: 'https://code.jquery.com/jquery.js'
  }
});

Map configuration can also be used to map subpaths:

Map 配置项也能配置一个子路径：

System.config({
  map: {
    app: '/app/'
  }
});

// will load /app/main.js
System.import('app/main.js');

Map configuration is always applied before the baseURL rule in the loader.

在加载器中，Map 配置项始终是在 baseURL 规则之前应用。

Plugin Loaders

插件加载器

Plugins handle alternative loading scenarios, including loading assets such as CSS or images, and providing custom transpilation scenarios.

插件处理另类的加载方案，包括加载资源如 CSS 或图片并提供自定义的转译方案（译者注：如预编译、coffee、JSX 等的语法转义方案）。

Plugins can also inline into bundles or remain separate requests when using SystemJS Builder.

当使用 SystemJS Builder 后，插件也能内联捆绑或者仍然独立使用。

To create a custom plugin, see the documentation on creating plugins.

去创建一个自定义插件，在 creating plugins 查看文档。

Basic Use

基本用法

Note that if using the defaultJSExtensions compatibility feature, plugins for resources with custom extensions will only work by using the package configuration defaultExtension: false option to override this for specific packages.

注意，如果一些特殊的包使用了 defaultJSExtensions 扩展功能，自定义拓展资源的插件将只能在使用了 package 配置项中的defaultExtension: false 选项后生效。

To use a plugin, set up the plugin itself as a standard module, either locating it in the baseURL or providing map configuration for it.

使用插件时，将插件自身当做一个标准的模块查找，也可以通过 baseURL 或者使用 map 配置项定位。

In this case, we're using the text plugin as an example.

这个示例中，我们使用 text plugin 做一个例子。

Then configure a custom resource to be loaded via the plugin, we then use meta configuration:

配置一个自定义资源并通过插件加载，我们可以使用 meta 配置项：

System.config({
  // locate the plugin via map configuration
  // (alternatively have it in the baseURL)
  map: {
    text: '/path/to/text-plugin.js'
  },
  // use meta configuration to reference which modules
  // should use the plugin loader
  meta: {
    'templates/*.html': {
      loader: 'text'
    }
  }
});

Now any code that loads from [baseURL]/templates/*.html will use the text loader plugin and return the loaded content:

现在从 [baseURL]/templates/*.html 加载的任何代码将被使用 text 加载器指向的插件并返回加载后的内容。

app.js

import htmlSource from 'templates/tpl.html';

document.querySelector('.container').innerHTML = htmlSource;

When we build app.js, the text plugin will then automatically inline the templates into the bundle during the build.

当我们构建 app.js 时，text 插件将在打包过程中自动将模板内联进打包文件。

Plugin Syntax

插件语法

It is also possible to use syntax to load via plugins instead of configuration:

除了配置也有可能通过使用插件的语法进行加载：

System.import('some/file.txt!text')

When no plugin is explicitly specified the extension is used as the plugin name itself.

当没有明确指明插件的扩展时，将被当做插件名本身使用。

Note it is usually advisable to use plugin loader configuration over plugin syntax.

注意，通常建议使用插件加载器配置用于其语法。

YIXUNFE / blog