在 Babel 中如何排除某些 “node_modules” 目录？-JavaScript中文网-JavaScript教程资源分享门户

在使用 Babel 进行前端开发时，我们通常需要对我们的代码进行转译和编译。这可以让我们将最新的 JavaScript 语法和功能转化成可在浏览器上执行的 JavaScript 代码。Babel 通常需要遍历整个项目的源代码，但是有时候我们并不想让 Babel 转译我们项目中的某些依赖（例如第三方库）。在这种情况下，我们可以在 Babel 中排除某些 “node_modules” 目录。

为什么要排除某些 “node_modules” 目录？

第三方库通常会在其代码中使用最新的 JavaScript 语法和功能，因为这可以让库更清晰，更易于阅读和理解。但是在项目中，我们可能需要对旧浏览器进行支持，这些浏览器可能不支持这些语言的新特性。如果我们运行 Babel 转译整个项目时，它也会转译第三方库，这会导致冗余和低效的代码。因此，排除某些 “node_modules” 目录通常是一种好的选择。

如何在 Babel 中排除某些 “node_modules” 目录？

在 Babel 中排除某些 “node_modules” 目录非常容易，我们只需要将这些目录添加到 Babel 配置文件的 “ignore” 属性中即可。一个基本的 Babel 配置文件可能如下所示：

// javascriptcn.com 代码示例
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "ignore": [
    "node_modules/**"
  ]
}

在上面的配置文件中，“ignore” 属性包含一个正则表达式，该表达式将匹配所有在 “node_modules” 目录中的文件。这告诉 Babel 忽略这些目录并不对它们应用转译和编译。

如果你需要排除多个 “node_modules” 目录，你可以向 “ignore” 属性中添加更多的正则表达式。例如，要同时排除 “node_modules” 和 “vendor” 目录，可以像下面这样配置 Babel 的 “ignore” 属性：

// javascriptcn.com 代码示例
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "ignore": [
    "node_modules/**",
    "vendor/**"
  ]
}

示例代码

下面是一个简单的示例，演示了如何在 Babel 中排除某些 “node_modules” 目录：

// index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

// javascriptcn.com 代码示例
// App.js

import React from "react";

import Button from "material-ui/Button";

const App = () => (
  <div>
    <Button variant="outlined" color="primary">
      Hello World
    </Button>
  </div>
);

export default App;

在这个示例中，我们使用了 React 和 Material-UI 两个第三方库。如果我们运行 Babel 转译整个项目，它也将转译这些第三方库，这显然是低效的。相反，我们可以在 Babel 配置文件中排除这些目录，只对我们的项目代码进行转译：

// javascriptcn.com 代码示例
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "ignore": [
    "node_modules/**",
    "material-ui/**"
  ]
}

这样，我们的代码将被转译，而第三方库将被忽略。这将提高我们项目的性能和速度。

总结

在 Babel 中排除某些 “node_modules” 目录可以提高项目的性能和速度，并防止冗余和低效的代码。我们可以使用 Babel 配置文件中的 “ignore” 属性来实现这一点，这个属性包含一个或多个正则表达式，用于匹配需要排除的目录。Babel 在转译我们的代码时，将忽略这些目录并仅仅转译我们项目的代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65422ffa7d4982a6ebbd9f60