Babel入门教程一直对Babel不是很了解，但是前端工程化中又少不了Babel的身影。所以，项目搭建 npm ini

一直对Babel不是很了解，但是前端工程化中又少不了Babel的身影。所以，

项目搭建

npm init -y
git init
创建 git 忽略文件

node_modules
dist
package-lock.json

4.安装babel依赖库

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

创建babel配置文件 babel.config.json

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

运行以下指令测试babel

  // Ps:babel相关指令查阅 npx babel --help
  // npx 是指向node_modules/.bin 路径
  // -o 指定输出文件 npx babel src -o dist/a.js
  // -d 指定输出文件夹
  npx babel src -d dist

Babel知识点

babel配置文件

  {
    "presets":[],
    "plugins":[]
  }

presets

Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。

我的理解是，通过Babel配置文件指定编译规则。这里的编译规则，就是在配置文件里 presets会用到的插件。 Babel插件非常多！！！处理ES2015的有

@babel/plugin-transform-arrow-functions
@babel/plugin-transform-block-scoped-functions
@babel/plugin-transform-block-scoping …… 处理ES2018的有
@babel/plugin-proposal-async-generator-functions
@babel/plugin-transform-dotall-regex

preset预设就是帮我们解决这个问题的。预设是一组Babel插件的集合，用大白话说就是插件包，例如babel-preset-es2015就是所有处理es2015的二十多个Babel插件的集合。这样我们就不用写一大堆插件配置项了,只需要用一个预设代替就可以了。另外，预设也可以是插件和其它预设的集合。Babel官方已经对常用的环境做了一些preset包

下面就是实用presets几个实用栗子演示下

案例1 火狐27环境对Promise 兼容处理

  // js 代码
  var promise = Promise.resolve("5");

// babel.config.json 代码
  {
  "presets": [
    ["@babel/preset-env",{
    "useBuiltIns":"usage",
    "corejs":2
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    // ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

 // package.json文件
 {
   ...,
  "browserslist": [
    "firefox 27"
  ]
 }

案例2 babel预设插件 @babel/preset-env 讲解
参数项
- targets
该参数项可以取值为字符串、字符串数组或对象，不设置的时候取默认值空对象{}。
- corejs
该参数项的取值可以是2或3，没有设置的时候取默认值为2（还有一种对象proposals取值方法，我们实际用不到，忽略掉即可）这个参数项只有useBuiltIns设置为'usage'或'entry'时，才会生效。
- modules
这个参数项的取值可以是"amd"、"umd" 、 "systemjs" 、 "commonjs" 、"cjs" 、"auto" 、false。在不设置的时候，取默认值"auto"。

该项用来设置是否把ES6的模块化语法改成其它模块化语法。

  presets: [["@babel/env", {
    targets: {
      "chrome": "58",
      "ie": "11"
    }
  }]],

本系列代码git地址
PS:如果有什么问题，可以项目里issue或者评论留言

Babel入门教程

项目搭建

Babel知识点

babel配置文件

presets

参数项

参考资料