npm 包 babel-loader-exclude-node-modules-except 使用教程

在前端开发中，我们经常使用 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 配置文件中加入以下代码即可：

const excludeNodeModulesExcept = require("babel-loader-exclude-node-modules-except");

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: excludeNodeModulesExcept(["lodash"]),
        use: {
          loader: "babel-loader",
          options: {
            presets: ["babel-preset-env"],
          },
        },
      },
    ],
  },
};

在这个例子中，我们使用 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