如何绕过 Babel 编译时的 CommonJS 转换?

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 设置为以下内容:

-
  ---------- -
    --------------------- -
      ---------- -----
    --
  -
-

这里,我们将 modules 选项设置为 false,表示告诉 Babel 不要将模块转换为 CommonJS形式。

方式 2:使用 transform-modules-* 插件

另一种方法是使用Babel的 transform-modules-* 插件。这些插件可以将模块转换为任何您想要的模块系统格式(包括ES6模块格式)。

首先安装@babel/plugin-transform-modules-esm插件:

--- ------- ---------- -----------------------------------

接下来,在.babelrc中配置插件:

-
  ---------- -
    --------------------------------------- -
      -------- ----
    --
  -
-

这里,我们将 transform-modules-* 插件设置为 @babel/plugin-transform-modules-esm,它将所有模块转换为 ES6 的模块格式。通过向插件传递 loose: true 选项,让插件产生更快速和简单的代码。

方式 3:手动注释源代码

不幸的是,以上两种方式并不能在所有情况下都完美地工作。此时我们需要手动标记哪些文件需要转换成CommonJS,哪些文件不需要转换。

例如,如果我们有一个名为 foo.js 的 ES6 模块:

-- ------
------ ----- --- - ------

我们可以在源文件中进行标记,表示该模块无需转换为CommonJS:

-- ------
-- ------ ------ ---- --
------ ----- --- - ------

这样Babel就会跳过这个文件的转换。

需要转换成 CommonJS 形式的模块,我们可以在源文件中进行标记:

-- ------
-- -----
-------------- - -
  ---- -----
-
-- -----

此处,我们明确地将模块转换为CommonJS形式,并且不需要Babel自动地将其转换。

结论

如果您想避免在Babel中转换 ES6 模块到 CommonJS 形式,那么可以尝试上述三种方式的一种。应该选择最符合您项目环境的方式来达到目的

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6729c1502e7021665e258902