Babel是一个广泛使用的 JavaScript编译器，它可以将高版本的JavaScript代码转换为低版本的JavaScript代码，以确保跨浏览器和跨平台的兼容性。在Babel中，常用的转换方式是将 ES6 的模块语法转换为 CommonJS 形式来进行模块化管理。但是，在某些情况下，我们可能需要避免这种转换，例如：
- 当我们使用 Rollup 或 Webpack 这样的捆绑工具时，它们已经支持ES6模块，所以不需要将其转换为 CommonJS 形式。
- 当我们将应用程序打包成Electron应用程序时，Electron本身已经支持ES6模块
接下来，本文将介绍如何在Babel编译时绕过 CommonJS 转换。
方式 1：使用 preset-env 配置项
在配置Babel时，使用preset-env配置项可以让Babel知道我们的目标环境，并选择性地执行转换插件。如果我们将目标环境设置为支持ES6模块的环境（如Rollup或WebPack），Babel 就会自动跳过将模块转换为 CommonJS 的步骤。
举个例子，假设我们使用.babelrc文件配置 Babel，我们可以将 preset-env 设置为以下内容：
{
"presets": [
["@babel/preset-env", {
"modules": false
}]
]
}这里，我们将 modules 选项设置为 false，表示告诉 Babel 不要将模块转换为 CommonJS形式。
方式 2：使用 transform-modules-* 插件
另一种方法是使用Babel的 transform-modules-* 插件。这些插件可以将模块转换为任何您想要的模块系统格式（包括ES6模块格式）。
首先安装@babel/plugin-transform-modules-esm插件：
npm install --save-dev @babel/plugin-transform-modules-esm
接下来，在.babelrc中配置插件：
{
"plugins": [
["@babel/plugin-transform-modules-esm", {
"loose": true
}]
]
}这里，我们将 transform-modules-* 插件设置为 @babel/plugin-transform-modules-esm，它将所有模块转换为 ES6 的模块格式。通过向插件传递 loose: true 选项，让插件产生更快速和简单的代码。
方式 3：手动注释源代码
不幸的是，以上两种方式并不能在所有情况下都完美地工作。此时我们需要手动标记哪些文件需要转换成CommonJS，哪些文件不需要转换。
例如，如果我们有一个名为 foo.js 的 ES6 模块：
// foo.js export const foo = 'foo';
我们可以在源文件中进行标记，表示该模块无需转换为CommonJS：
// foo.js /* @babel ignore file */ export const foo = 'foo';
这样Babel就会跳过这个文件的转换。
需要转换成 CommonJS 形式的模块，我们可以在源文件中进行标记：
// bar.js
// 转化段代码
module.exports = {
baz: 'baz'
}
// 转化段代码此处，我们明确地将模块转换为CommonJS形式，并且不需要Babel自动地将其转换。
结论
如果您想避免在Babel中转换 ES6 模块到 CommonJS 形式，那么可以尝试上述三种方式的一种。应该选择最符合您项目环境的方式来达到目的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729c1502e7021665e258902