在前端开发中，随着 ES6 的推广，我们常常需要使用 Babel 来编译 ES6 代码。但是，有时候我们也需要使用一些 loaders 来进行前端代码的处理，例如使用 less-loader 处理 less 文件等。那么，在使用 Babel 编译 ES6 代码时，如何支持 loaders 呢？本文将为大家详细介绍。
什么是 loaders
loaders 是一种 webpack 的机制，用于在加载模块时预处理文件。它可以将非 JavaScript 文件转换成 webpack 可以识别的模块，例如把 less 文件解析成 CSS，把图片转换成 base64 字符串等。
例如，通过以下代码可以将一个 less 文件转换成 CSS，然后加入到 JavaScript 文件中：
import './styles.less'
在 webpack 中，这个 less 文件会先被 less-loader 处理成 CSS，然后再被 css-loader 处理成 JavaScript 模块。
Babel 如何支持 loaders
Babel 只是一个 JavaScript 编译器，它不会主动识别和处理非 JavaScript 文件。但是，我们可以通过使用一些插件，让 Babel 支持使用 loaders 来处理非 JavaScript 文件。
1. 使用 babel-loader
babel-loader 是一个可以将 JavaScript 模块中的代码通过 Babel 进行编译的 webpack loader。
在 webpack 配置文件中，我们可以通过如下方式配置 babel-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------- -- ---------
-------- --------------- -- ----------
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-在这个配置中，我们通过 test 属性指定需要编译的文件，这里使用了一个正则表达式来匹配所有的 .js 和 .jsx 文件。
由于我们在使用 Babel 编译 ES6 代码时，常常使用 @babel/preset-env 这个 preset，所以在 options 中指定了这个 preset。
2. 使用 babel-plugin-transform-runtime
使用 babel-plugin-transform-runtime，可以让 Babel 在预编译阶段将一些公共的辅助函数插入到模块中。这些辅助函数不会重复定义，能有效减小编译后代码的体积。此外，它还会将内置的 babel helpers 替换成从 @babel/runtime 获取的 helpers。
在使用 babel-plugin-transform-runtime 时，需要安装 @babel/runtime 和 babel-plugin-transform-runtime。
在 webpack 配置文件中，我们可以通过如下方式使用 babel-plugin-transform-runtime：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
-------- ---------------
------- ---------------
-------- -
-------- ----------------------
-------- -
----------------------------------- -
------- -- -- -- ------ --
-------- -----
------------ -----
------------- -----
--
-
-
-
-
-
-这里需要注意，babel-plugin-transform-runtime 需要配合 @babel/runtime 使用。
3. 使用 @babel/register
除了在 webpack 中使用 babel-loader 和 babel-plugin-transform-runtime，还可以使用 @babel/register 加载 Babel，这样就可以使用 webpack 以外的脚本来预处理代码。
在使用 @babel/register 时，需要安装 @babel/register 和 @babel/core。
可以参考以下代码来使用 @babel/register：
require('@babel/register')({
presets: ['@babel/preset-env']
})
require('./app.js')这里的 app.js 即是需要预处理的文件。在加载 app.js 时，@babel/register 会自动进行预处理并将其转换成 JavaScript。
示例代码
下面是一个简单的 webpack 配置文件的示例，用于 Babel 编译 ES6 代码并支持 less-loader：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- ---------------------
-
--
-
----- ----------
-------- ---------------
---- -
---------------
-------------
-------------
-
-
-
-
-这个配置文件用于将 src 目录下的 index.js 文件转换成 dist 目录下的 bundle.js 文件，并支持处理 less 文件。
总结
在使用 Babel 编译 ES6 代码时，可以通过使用 babel-loader 和 babel-plugin-transform-runtime 来支持 loaders。此外，还可以使用 @babel/register 加载 Babel，使其可以预处理代码。
在实际开发中，我们会使用更多的 loaders，并且需要根据具体的情况来进行配置。不过，本文介绍的方法可以作为 Babel 支持 loaders 的基础，并且具有很好的学习以及指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6dd20f6b2d6eab3236116
