【场景方案】用babel把将es6降级成es5，提高浏览器兼容性

概念

小白就记住，babel能够将es6编译成ES5，解决低版本浏览器无法识别ES6的问题。

---

安装

全局安装，用babel提供的babel-cli工具。

npm install -g babel-cli

通过查看版本来看是否安装完成：

babel --version

---

基本使用

初始化一个node项目

在一个新建文件夹中：

npm init -y

获得一个package.json配置文件。

然后可以在该目录中创建个.babelrc的文件，里面写babel的配置，比如presets字段可以写转换成的语法。例子：

{
	"presets":["es2015"], // 转成es5
	"plugins":[]
}

然后建个src/index.js文件里面写一些es6的js语句：

let a = 'a'
const b = 'b'
let arr = [1,2,3,4,5]
let brr = arr.map(i=>i*2)
console.log(a, b)
console.log(brr)

可以试着启动node环境中的index.js文件

node src/index

命令行会打印出对应结果，表示能正常运行。

es5转译

然后我们安装es5和es6的对照码：

cnpm install --save-dev babel-preset-es2015

在babel配置文件中注册，上面的例子已经是注册了

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

进行编译输出到dist文件：

babel src -d dist

根目录文件就会出现dist/index.js文件和node_modules文件夹，其中dist/index.js文件里就是编译好的es5语法：

'use strict';

var a = 'a';
var b = 'b';
var arr = [1, 2, 3, 4, 5];
var brr = arr.map(function (i) {
  return i * 2;
});
console.log(a, b);
console.log(brr);

但还不够，es6有些高级语法单独靠babel-preset-es2015还不行，还需要安装

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

再注册：

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
}

方便转译的话，可以在package.json设置脚本指令：

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"eschange": "babel src -d dist" // 加这行，babel表示命令库里的命令，src表示放js的文件夹，-d表示输出，dist表示编译好后放入的文件夹
  },

然后之后只需要

npm run eschange

就能执行转译工作了。

---

在webpack中使用

同样先初始化一个node项目，es6本身支持模块的写法，但是所有浏览器都不认识模块，所以需要通过webpack来编译。

项目安装webpack：

npm install webpack webpack-cli -D

指定版本可以这样打：
npm install webpack@4.16.4 

会生成几个文件，其中node_modules文件中没有babel模块，所以要添加：

npm install babel-core babel-loader babel-preset-env  -D
意思是安装babel的核心库core和命令库cli以及环境预设env（指导babel的编译）

npm i @babel/polyfill -S
再加这个模块，可以兼容ie6以下的版本

也是新建个.babelrc文件，配置安装好的环境预设：

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

也是建个src/index.js写一些es6语法。

然后在package.json中添加打包脚本：

"dev": "webpack --mode development"

执行

npm run dev

index.js的内容就会被编译成es5代码且被打包进dist/main.js文件。

---

总结

如果是懒人，不想多一些理解。我觉得只要记住一个事情就好了，就是babel通过配置好在node_modules中的环境预设库，去自动把es6的语法降级成es5。

---

工程化

在创建一个vue工程的时候，就已帮我们安装和设定好了babel，可能在package.json中配置或者单独的.babelrc文件，这就是工程化的好处。

如果想要学好babel就去官方网站看看吧----->Babel