Babel解决ES6不能被所有浏览器解析问题

一、简介

1.ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

2.Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

二、安装Babel

Babel提供babel-cli工具，用于命令行转码

安装:npm i -g babel-cli

检查安装:babel --version

三、Babel的使用

1）安装Node.js环境：https://nodejs.org/zh-cn/

2）进入项目,初始化项目:npm init -y

3）创建文件 src/example.js

4）安装转码器,在项目中安装：npm i --save-dev babel-preset-env 或 npm i --save-dev babel-preset-es2015

5）创建文件并配置：.babelrc {"presets":["env","es2015"],"plugins":[]}

注：Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件。

四、文件转化

1. 文件：
   
   babel src/index.js -o dist/index.js
   
   注：-o(--out-file)：输出的意思
2. 文件夹：
   
   babel src -d dist
   
   注：-d(--out-dir)：指定输入目录
3. 实时监控：
   
   babel src -w -d dist
   
   注：-w：watch监控

五、自定义脚本

1）改写package.json

{
  // ...
  "scripts":{
    // ...
    "build": "babel src\\index.js -o dist\\index.js"
  },
}

2）转码时,执行下面命令

mkdir dist

npm run build