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

以何种方式使用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"]
});