以何种方式使用babel6种

以何种方式使用 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”]
});
复制复制代码