Babel Preset Env 使用指南

Babel Preset Env 使用指南

babel-preset-envPSA: this repo has been moved into babel/babel -->项目地址:https://gitcode.com/gh_mirrors/ba/babel-preset-env

项目介绍

@babel/preset-env 是一个智能的 Babel 预设，允许你使用最新的 JavaScript 语法，而无需微观管理哪些语法转换（以及可选的浏览器 polyfill）。它根据目标环境（如浏览器或 Node.js 版本）自动确定所需的 Babel 插件和 polyfill。

项目快速启动

安装

首先，你需要安装 @babel/preset-env：

npm install --save-dev @babel/preset-env

配置

在你的 Babel 配置文件（如 .babelrc 或 babel.config.js）中添加 @babel/preset-env：

{
  "presets": ["@babel/preset-env"]
}

示例代码

假设你有一个简单的 JavaScript 文件 src/index.js：

const fn = () => {
  console.log('Hello, world!');
};

fn();

你可以使用 Babel 命令行工具进行转换：

npx babel src --out-dir dist

转换后的文件将位于 dist 目录中。

应用案例和最佳实践

目标环境配置

你可以通过 targets 选项指定目标环境。例如，如果你想支持最新的 Chrome 和 Firefox 浏览器，可以这样配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "firefox": "57"
      }
    }]
  ]
}

使用 Polyfill

@babel/preset-env 可以自动引入所需的 polyfill。你需要安装 @babel/polyfill 并进行配置：

npm install --save @babel/polyfill

然后在你的入口文件中引入 @babel/polyfill：

import '@babel/polyfill';

典型生态项目

Webpack

在 Webpack 中使用 @babel/preset-env，你需要安装 babel-loader：

npm install --save-dev babel-loader

然后在 webpack.config.js 中配置 babel-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

Create React App

如果你使用 Create React App，它已经内置了 @babel/preset-env，无需额外配置。

通过以上步骤，你可以快速上手并充分利用 @babel/preset-env 的功能，提升你的 JavaScript 开发体验。

babel-preset-envPSA: this repo has been moved into babel/babel -->项目地址:https://gitcode.com/gh_mirrors/ba/babel-preset-env