以何種方式使用babel?（6種）

以何種方式使用babel?（6種）

【01】Babel能夠配置！許多其餘工具也有相似的配置：ESLint（.eslintrc），Prettier （.prettierrc）。

容許使用全部Babel API

可是，若是該選項須要JavaScript，則可能須要使用JavaScript

【02】babel自身使用的配置文件地址：https://github.com/babel/babe...

以何種方式使用babel?

0一、babel.config.js

在項目的根目錄中建立一個babel.config.js文件。使用如下內容。

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

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

  return {
    presets,
    plugins
  };
}

【】例子：

如下的瀏覽器列表只是一個隨意的例子。您必須根據要支持的瀏覽器進行調整。

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

運行此命令將src目錄中的全部代碼編譯爲lib目錄：

./node_modules/.bin/babel src --out-dir lib

0二、.babelrc

在項目的根目錄中建立一個.babelrc文件。使用如下內容。

一個僅適用於簡單單個包的靜態配置。

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

0三、package.json

在package.json配置.babel屬性。

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

0四、.babelrc.js

配置.babelrc與之相同，但能夠使用JavaScript編寫它。

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 };

0五、使用CLI（@babel/cli）

babel --plugins @babel/plugin-transform-arrow-functions script.js

0六、使用API（@babel/core）

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"]
});