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