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