babel入门文档babel是什么 babel能转化JSX的语法，在解析react的时候可以下载babel的预设，添加到

babel是什么

babel是一个工具链主要是为了转换ES5+代码，让当前的js版本和老的浏览器和环境一致。他的主要作用有：

Transform syntax【改变句法】

Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js) 【Polyfill《垫片》：新的语言特性可能不仅包括语法结构和运算符，还可能包含内建函数，polyfill用来更新和添加新函数】

Source code transformations (codemods) 【源码转换】

其他等等

babel能转化JSX的语法，在解析react的时候可以下载babel的预设，添加到你的babel结构中

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

Babel可以去掉类型注释,查看我们的Flow预设或TypeScript预设来开始。请记住，Babel不做类型检查,你仍然需要安装并使用Flow或TypeScript来检查类型。

npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/preset-typescript

babel是可扩展的，babel是由插件构成的，使用现有插件组成自己的转换通道或者是写自己的插件，通过使用或者创建一个预设，很容易使用一组插件，插件其实就是一个函数。

babel搭建

1.运行安装基础命令

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

2.创建babel.config.json 在项目根目录下【版本在V7.8.0以上】

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

3.运行下边的命令将所有代码从src目录编译到lib目录

./node_modules/.bin/babel src --out-dir lib

babel的配置

创建文件【在项目的根目录下和packjson同级创建】

babel.config.json 和 .babelrc.json是使用场景
babel.config.json官方推荐使用，适用于单一仓库模式，或者需要编译node_modules
.babelrc.json仅仅适用于项目的某个部分
babel会按照优先级升序打印有效的配置源
babel.config.json < .babelrc < programmatic options from @babel/cli
换句话说babel.config.json 被 .babelrc覆盖， .babelrc 被 programmatic options覆盖

配置方式

配置.json文件的格式
{
  "presets": [...],
  "plugins": [...]
}
配置.js文件的格式
module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}
或者将json中的配置信息作为babel键的值添加到packjson中
{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}
也可以用js来编写babel.config.json 和 .babelrc.json，还可以调用node中的任何API
const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

babel的合并方式

- 对于assumptions，parserOpts，和generatorOpts这几个是合并而不是替换
- 对于plugins和presets，他们是替换原始定义

babel7升级

env的出现

env代替以前的预设，以下的应该被env代替
babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest

正在移除state预设

要自动完成这个任务可以运行npx babel-upgrade

建议移除@babel/polyfill的polyfills

现在的@babel/polyfill其实是core-js的一个代名词
它之前使用仅仅是两个引用
import "core-js/shim"; // included < Stage 4 proposals
import "regenerator-runtime/runtime";
如果你想要使用建议，你需要独立的导入他们，你应该直接从core-js或者另外的npm包导出

版本/依赖（现在大多数的包在@babel/core.都有一个对等依赖） 5.从包中删除年份

@babel/plugin-transform-es2015-classes became @babel/plugin-transform-classes.

babel7限制babel6对"use strict"的自动引入，如果你需要那需要明确引入 transform-strict-mode到你的babel配置中

babel的插件

转化其实是以插件的形态表现的，对于将ES5+ 的代码转化为ES5的语法格式，可以依赖于babel的官方插件

npm install --save-dev @babel/plugin-transform-arrow-functions

但是对于其他的ES5的新特性想要转化，我们一个一个安装我们所需要的插件不太友好，所以使用预设来提前确定用的插件，一个非常好的预设安装

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

对于ES5+的新增属性使用polyfill

npm install --save @babel/polyfill（polyfill需要在你的源代码中运行所以使用的是--save）

但是现在我们我们使用了env的预设，我们有一个“useBuiltIns” 的选项，我们将值设置为“usage”就包含了我们需要的polyfill

对于babel7.4.0以上的7的版本很多polyfill用的是
import "core-js/stable";
import "regenerator-runtime/runtime";
或者
import "core-js";
import "regenerator-runtime/runtime";
看到也不要奇怪，它实现的就是@babel/polyfill的功能
如需使用 Iterators 则必须引入 Babel polyfill。

总结：我们使用@babel/cli是在终端运行babel, @babel/polyfill是用来polyfill所有新的js属性，并且env预设仅是包含了我们使用的和我们目标浏览器缺失的polyfills和转换

插件顺序

1. 插件在Presets前运行
2. 插件顺序从前往后执行

babel的预设

预设的排列顺序:Preset是逆序排列的（从后往前）

{
  "presets": ["a", "b", "c"]
}
执行顺序是c , b , a 主要是为了确保向后兼容，由于大多数用户"es2015" 放在 "stage-0" 之前。

babel入门文档

babel是什么

babel搭建

babel的配置

babel7升级

babel的插件

babel的预设