Babel 配置文件

Babel 配置文件

本節我們學習 Babel 的配置，許多工具都有自己的配置文件，例如ESLint 的配置文件爲 .eslintrc，Prettier 的配置文件爲 .prettierrc。

Babel 也有配置文件， Babel 的配置文件是 Babel 執行時默認會在當前目錄尋找的文件，主要有 .babelrc、.babelrc.js、babel.config.js、package.json 文件。

.babelrc

.babelrc 文件前面我們使用過，我們可以在項目根目錄下創建一個 .babelrc 文件，然後輸入如下內容：

 {
    "presets": [...],
    "plugins": [...]
  }

.babelrc.js

.babelrc.js 文件的配置和 .babelrc 的相同，只是文件格式不同，一個是 json 文件，一個是 js 文件。

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

還可以調用Node.js 的任何 API，例如基於進程環境進行動態配置：

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

babel.config.js

在項目根目錄下創建一個 babel.config.js 文件，可以通過 module.exports 輸出配置項，例如：

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

.babelrc 文件放置在項目的根目錄中時和 babel.config.js 效果一致，我們只需要選擇一種創建即可。如果兩種類型的配置文件都存在，.babelrc 會覆蓋 babel.config.js 的配置。

package.json

package.json 文件我們也不陌生，可以直接通過 npm init 命令來創建。或者我們還可以將 .babelrc 中的配置信息作爲 babel 鍵的值添加到 package.json 文件中，如下所示：

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "babel": {
      "presets": [...],
      "plugins": [...]
    }
}

當然我們除了將把配置寫在上述這幾種配置文件中，我們也可以寫在構建工具的配置裏。對於不同的構建工具，Babel 也提供了相應的配置項，例如 webpack 的 babel-loader 的配置項，其本質和配置文件是一樣的。

配置文件中的主要配置項就是 plugins 和 presets 這兩個數組，plugins爲插件數組，presets 爲預設數組。其他的例如 ignore、minified 等我們一般用不到。

更多可以查看鏈接：https://www.9xkd.com/