以何種方式使用babel?（6種）
【01】Babel可以配置！許多其他工具也有類似的配置：ESLint（.eslintrc），Prettier （.prettierrc）。
允許使用所有Babel API
但是，如果該選項需要JavaScript，則可能需要使用JavaScript
【02】babel自身使用的配置文件地址：https://github.com/babel/babe...
以何種方式使用babel?
01、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
複製複製代碼
02、.babelrc
在項目的根目錄中創建一個.babelrc文件。使用以下內容。
一個僅適用於簡單單個包的靜態配置。
{
"presets": [...],
"plugins": [...]
}
複製複製代碼
03、package.json
在package.json配置.babel屬性。
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],}
}
複製複製代碼
04、.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 };
複製複製代碼
05、使用CLI（@babel/cli）
babel --plugins @babel/plugin-transform-arrow-functions script.js
複製複製代碼
06、使用API（@babel/core）
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
});
複製複製代碼