什么是 @gerhobbelt/babel-plugin-transform-modules-systemjs
@gerhobbelt/babel-plugin-transform-modules-systemjs 是一个 Babel 插件，它可以将 ECMAScript 模块转换为 SystemJS 模块。这意味着我们可以在不使用额外打包工具的情况下，在浏览器中直接运行 ES6 模块代码。
安装 @gerhobbelt/babel-plugin-transform-modules-systemjs
使用 npm 安装：
npm install --save-dev @gerhobbelt/babel-plugin-transform-modules-systemjs
使用 @gerhobbelt/babel-plugin-transform-modules-systemjs
在 babel 配置文件中使用该插件：
{
"plugins": ["@gerhobbelt/babel-plugin-transform-modules-systemjs"]
}或者在 Babel CLI 中使用该插件：
babel src --out-dir lib --plugins @gerhobbelt/babel-plugin-transform-modules-systemjs
示例代码
除了上面的使用方法，我们还可以通过以下示例代码来更好地理解该插件的用法。
我们有一个简单的模块 myModule.js，如下所示：
// myModule.js
export function add(a, b) {
return a + b;
}我们可以通过以下命令将该模块转换为 SystemJS 模块：
babel myModule.js --out-file myModule.system.js --plugins @gerhobbelt/babel-plugin-transform-modules-systemjs
转换后的代码如下所示：
-- -------------------- ---- -------
---------------------------- -------- --------- --------- -
---- --------
--- ----
------ -
-------- --------- ---------- -
--- - -------------
---
-------- -------- -- -
-------------- -----
-------- ------ -- -
------ - - --
-
-
--
---我们可以现在将生成的 SystemJS 模块直接在浏览器中加载并使用：
-- -------------------- ---- -------
--------- -----
------
------
--------- -------- ----------
-------
------
------- --------------------------------------------------------------------
--------
------------------------------------------------------------- -
--------------------------- ---- -- -
---
---------
-------
-------总结
以上就是 @gerhobbelt/babel-plugin-transform-modules-systemjs 的使用教程。该插件可以帮助我们在浏览器中直接使用 ES6 模块，无需使用打包工具等额外的编译依赖。不过需要注意的是，目前浏览器对 ES6 模块的支持度并不是很完善，需要使用多种姿势来进行兼容处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02d7ac403f2923b035bdca