在前端开发中，我们经常使用 Babel 转换 ES6+ 代码为可在现代浏览器上运行的 JavaScript 代码。对于使用 webpack 进行构建的项目，可以使用 babel-loader 来自动转换代码。但是，我们希望排除 node_modules 目录下的代码，以提高构建性能和减少构建结果文件大小。而 npm 包 babel-loader-exclude-node-modules-except 就可以帮助我们达到这个目的。
安装
在使用 babel-loader-exclude-node-modules-except 之前，需要先安装相应的依赖：Babel 和 webpack。
# 安装 Babel 相关依赖 npm install babel-core babel-loader babel-preset-env --save-dev # 安装 webpack 相关依赖 npm install webpack webpack-cli webpack-dev-server --save-dev
安装 babel-loader-exclude-node-modules-except：
npm install babel-loader-exclude-node-modules-except --save-dev
使用
配置 webpack
在 webpack 配置文件中加入以下代码即可：
-- -------------------- ---- -------
----- ------------------------ - ----------------------------------------------------
-------------- - -
-- --- ---- ---
------- -
------ -
-
----- --------
-------- -------------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
--
--
--
--
--
--在这个例子中，我们使用 lodash 库，但是我们希望它不被 Babel 转换。我们可以将 lodash 添加到 excludeNodeModulesExcept 的参数中，这样除了 lodash，其他 node_modules 目录下的库都会被 Babel 转换。
关于参数
excludeNodeModulesExcept 接收一个参数，是一个数组，包含需要排除的库名（字符串）。比如，如果我们需要排除 lodash 和 vue，可以这样：
excludeNodeModulesExcept(["lodash", "vue"])
如果不需要排除任何库，则可以直接传入一个空数组：
excludeNodeModulesExcept([])
示例代码
为了演示 babel-loader-exclude-node-modules-except 的效果，我们编写以下代码：
import _ from "lodash" const arr = [1, 2, 3] console.log(_.chunk(arr, 2))
它将一个数组按照指定大小分割成若干个数组。
我们可以在 webpack 配置文件中配置 babel-loader-exclude-node-modules-except，然后进行构建。构建结果如下：
可以看到，lodash 库的代码并没有被 Babel 转换。如果我们将 lodash 从参数中移除，再次构建，lodash 的代码将会被转换。
总结
使用 babel-loader-exclude-node-modules-except 可以帮助我们在使用 Babel 进行代码转换的同时，提高构建性能和减少构建结果文件大小。在实际项目中，该库具有非常实用的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673defb81d47349e53be5