前言
在前端开发中，我们通常使用 Babel 将 ES6+ 语法转译为浏览器可以运行的 JavaScript。而在某些情况下，我们需要在代码中使用一些运行时模块加载器（如 SystemJS），以便能够动态地加载和执行模块化 JavaScript。
这时候，我们可以使用 babel-plugin-transform-system-register 这个 NPM 包来将 ES6 模块转换为 SystemJS 模块。本文将介绍该插件的使用方法并提供示例代码。
安装
首先，确保你已经安装了 Babel。如果没有，请按照以下步骤进行安装：
安装 Node.js。
打开命令行工具，输入以下指令进行全局安装 Babel：
--- ------- -------- ---------
完成以上步骤后，即可开始安装 babel-plugin-transform-system-register 插件：
--- ------- -------------------------------------- ----------
配置
在项目根目录下创建 .babelrc 文件，并在其中添加以下内容：
-
---------- -
--------------------------------------
----------------------------- -
--------------- ---------
-------------- ------
------------- -----
--
-
-上面的配置文件中，我们使用了两个插件：transform-es2015-modules-systemjs 和 transform-system-register。前者将 ES6 模块语法转换为 SystemJS 的模块语法，后者则用于把 ES6 模块转换成 System.register 形式的代码。
在配置文件中，我们还可以设置一些选项：
systemGlobal：指定 SystemJS 的全局变量名称，默认为System。ignoreRegex：是否忽略某些文件，默认为false。shouldWrap：是否在转换后的代码外部包裹一层函数，默认为false。
示例代码
下面是一个简单的示例，演示了如何使用 babel-plugin-transform-system-register 插件将 ES6 模块转换为 SystemJS 模块：
-- -------- ------ - --- - ---- ------------ ------------------ ----
-- ------- ------ -------- ------ -- - ------ - - -- -
使用 Babel 命令行工具进行转译：
----- -------- ---------- -------------
转译后的代码如下所示：
------------------- -------- --------- --------- -
---- --------
--- ----
------ -
-------- ---
-------- -------- -- -
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
-------- ------------------------- ------ - --- ---- - - -- - - ------------- ---- - --- ---------- - --------- --------------------- - --------------------- -- ------ ----------------------- - ----- -- -------- -- ----------- ------------------- - ----- ----------------------------- --------------- ------------ - -
-------- ------------------------- ----------- ------------ - -- ------------ ---------------------------------------- ------------ -- ------------- ------------------------------ ------------- ------ ------------ - -
-------- ------------------- -- - ------ -------------------- -- -------------------------- -- -- ------------------- -
-------- ------------------ - ----- --- ------------------ ------- -- ----------- ------------ ----------- -
-------- -------------------------- -- - --- ---- - --- --- -- - ----- --- -- - ------ --- -- - ---------- --- - --- ---- -- - ----------------------- --- ---- - --- - ----------------- -
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------