简介
babel-plugin-transform-cjs-system-wrapper 是一个 Babel 插件，它可以将 CommonJS 模块转换为 SystemJS 模块格式。这个插件适用于在浏览器环境中使用 CommonJS 模块的场景。
通过使用该插件，开发者可以将 CommonJS 模块转换为 SystemJS 模块，以便在浏览器环境中使用。这样就能够在浏览器中直接使用像 require() 这样的 CommonJS 模块导入语句了。
安装
要安装 babel-plugin-transform-cjs-system-wrapper，首先需要安装 Babel：
npm install --save-dev @babel/core @babel/cli
接着，安装插件：
npm install --save-dev babel-plugin-transform-cjs-system-wrapper
使用
在 Babel 配置文件中添加插件：
// .babelrc.js
module.exports = {
plugins: [
['transform-cjs-system-wrapper', {
// options
}]
]
}配置项
babel-plugin-transform-cjs-system-wrapper 插件提供了一些选项来更好地控制输出结果。以下是可用的选项及其默认值：
{
"systemGlobal": "System",
"wrapperFunction": "System.register",
"exportName": "__esmPack",
"noInterop": false,
"lazyExport": false,
"lazyRequire": false
}systemGlobal
Type: string Default: System
指定要使用的 SystemJS 全局变量名称。
wrapperFunction
Type: string Default: System.register
指定生成的包装函数名称。
exportName
Type: string Default: __esmPack
用于导出 CommonJS 模块的名称。
noInterop
Type: boolean Default: false
禁用 CJS/ESM 导入导出之间的转换，需要手动进行转换。
lazyExport
Type: boolean Default: false
将 CommonJS 模块中的所有导出都懒加载到一个对象中。
lazyRequire
Type: boolean Default: false
所有 CommonJS require() 都将在模块实际需要时才调用。
示例
假设有以下 CommonJS 模块：
-- -------------------- ---- -------
-- -------
-------------- - -
---- ----------- -- -
------ - - --
--
--------- ----------- -- -
------ - - --
-
-使用 babel-plugin-transform-cjs-system-wrapper 插件进行转换：
-- -------------------- ---- -------
-- -----------
-------------- - -
-------- -
-------------------------------- -
------------- ---------
---------------- ------------------
----------- -----------
--
-
-输出结果：
-- -------------------- ---- -------
---------------------------- --- ------------------------------------ -
---- --------
--- ---------------------- - --------------------------------------------------------
--- ----- - ------------------
--- ------ - ------------------------------
------ -
-------- ---
-------- ---------- -
--------------------------------- --------------------
-------------------------------------- -------------------------
-
--
---最后，可以将 SystemJS 模块加载到浏览器中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -----------------------------------------------------------------------------------
--------
---------------------------------------------- -
----------------------- ---- -- -- -
---
---------
-------
-------------
-------总结
babel-plugin-transform-cjs-system-wrapper 插件可以帮助开发者在浏览器环境中使用 CommonJS 模
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45805