简介
@gerhobbelt/babel-plugin-transform-modules-commonjs 是一款将 ES6 模块转换成 commonjs 格式的 Babel 插件。他可以让你在使用 ES6 模块的同时，能在浏览器端以及 Node.js 环境中使用它们。
安装
你可以通过 npm 安装该插件。具体命令如下：
npm install @gerhobbelt/babel-plugin-transform-modules-commonjs --save-dev
使用
在 Babel 配置文件中使用
在使用该插件前，你需要先安装 babel-core 和 babel-loader。然后，你可以在 Babel 配置文件中导入该插件并在 plugins 属性中声明：
module.exports = {
// ...
plugins: [
// ...
'@gerhobbelt/babel-plugin-transform-modules-commonjs',
],
};当你运行 Babel 命令时，该插件会自动将 JS 代码中的 ES6 模块转换为 commonjs 格式。
在 Webpack 配置文件中使用
如果你是使用Webpack构建你的项目，你需要在配置文件中对 babel-loader 做一些修改。具体步骤如下：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ------
-------- -
-- ---
------------------------------------------------------
--
--
--
--
--
--
--
示例代码
-- -------------------- ---- ------- -- ------ ------ - --- - ---- ---------- ----- - - -- ----- - - -- ----- ------ - ------ --- --------------------
// utils.js
export const sum = (num1, num2) => {
return num1 + num2;
}当使用该插件后，会将 app.js 转换成以下形式：
// app.js
var _utils = require("./utils");
var a = 1;
var b = 2;
var result = (0, _utils.sum)(a, b);
console.log(result);总结
@gerhobbelt/babel-plugin-transform-modules-commonjs 是一款非常方便的 Babel 插件，它可以让你在使用 ES6 模块的同时，让代码能够在不同的环境中运行，提高了代码的可移植性。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02d7ac403f2923b035bdc9