前言
在前端开发中，我们经常会用到 Babel 转码器来将 ES6/ES7 代码转换为浏览器可识别的 ES5 代码。然而，随着现代化前端架构的发展，我们的前端代码架构已经从传统的 js 文件架构转变为了模块化的架构（如 CommonJS、AMD 等），这时候我们所使用的 Babel 转码器就需要额外的插件支持。而 babel-preset-mjs-babili 就是这样一个基于 mjs 模块化机制的 Babel 插件，能帮助我们更优雅地处理前端代码架构。
安装
首先，我们需要在项目中安装 babel-preset-mjs-babili 包。你可以通过以下方式来安装：
npm install babel-preset-mjs-babili --save-dev
安装完成后，我们便可以在项目的根目录下添加 .babelrc 来配置 babel-preset-mjs-babili：
{
"presets": [
["mjs-babili", {
"es5": { /* Your options for 'transform-es2015' here */ },
"mjs": { /* Your options for 'transform-modernize' here */ }
}]
]
}使用
在项目中使用 babel-preset-mjs-babili 的方式与使用 Babel 通用的方式相同，只不过在使用过程中需要额外注意 mjs 模块化机制的适用性。下面我将介绍如何使用 babel-preset-mjs-babili 来处理模块化导入/导出。
导入
在 ES6 中，导入模块的方式为：
import { a, b, c } from './module';而在 mjs 中，导入模块的方式为：
import { a, b, c } from './module.mjs';因此，在使用 babel-preset-mjs-babili 时，我们需要在配置中添加针对 ES6 模块的 'transform-es2015-modules-commonjs'。
{
"presets": [
["mjs-babili", {
"es5": { "modules": "commonjs" },
"mjs": { "modules": false }
}]
]
}在配置中添加针对 ES6 模块的 'transform-es2015-modules-commonjs' 以后，进行编译转换时，原有的 ES6 模块将被转化为 CommonJS 模块，同时使用 import 语句引用模块的情况不变。
导出
在 ES6 中，导出模块的方式为：
export { a, b, c };而在 mjs 中，导出模块的方式为：
export { a, b, c } from './module.js';如果我们只需要将 es6 的导出语法转换成 mjs 的导出语法，并不需要额外的插件，我们只需要在 babel 配置中添加 'transform-es2015-modules-commonjs' 和 'transform-es2015-modules-modernize' 参数即可。
-- -------------------- ---- -------
-
---------- -
-------------- -
------ - ---------- ---------- --
------ -
---------- ------
------------ -
--------- ------
-------- ------
------- ------
-------------------- ----
-
-
--
-
-在配置中添加 'transform-es2015-modules-modernize' 参数以后，导出语法将会被转化为 mjs 格式。
总结
babel-preset-mjs-babili 提供了一种更适应现代化前端架构的 Babel 插件方案，帮助我们更优雅地处理前端代码架构。在使用 babel-preset-mjs-babili 时需要注意：针对 ES6 模块使用 'transform-es2015-modules-commonjs' 参数，针对导出语法使用 'transform-es2015-modules-modernize' 参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad581e8991b448d86eb