【Es6入门踩坑记】01用Babel把ES6编译成ES5

写在前言：ECMAScript和 JavaScript 的关系
前者是后者的规格，后者是前者的一种实现

• 虽然现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6语法 这就需要我们把ES6的语法自动转为ES5的语法。
• 下面我会使用Babel把ES6编译成ES5.

Babel ( babeljs.io／）是 一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码
Babel 配置文件是 .babelrc ，存放在项目的根目录下。

建立两个文件夹

• src
• dist

在src目录下建立两个文件

• index.js
• index.html

用快捷键Ctrl+波浪线（~）打开终端

输入如下命令对文件进行初始化，根目录会出现package.json文件夹

npm init -y

在终端输入如下命令安装一个可转换的Bebal

npm install -g babel-cli

• -g表示全局安装

接下来我们在终端输入以下命令

baber src/index.js -o dist/index.js

• -o表示输出

此时它提示我们出错啦

接下来我们输入如下命令

npm install --save-dev babel-preset-es2015 babel-cli

安装成功之后在src建配置文件：.babelrc

• Babel 配置文件是 .babelrc ，存放在项目的根目录下。使用 Babel 的第 1 步就是配置这 个文件。
• 该文件用来设置转码规则和插件。
  
  之后我们在终端输入

bebal src/index.js -o dist/index.js

会发现依旧是失败的

接下来我们修改package.json文件

替换之后的代码如蓝色方框

接下来我们在终端输入

npm run build

我们可以在终端看见在dist文件夹下成功生成了index.js文件

现在我们来看看index.js文件的内容

可以发现已经转换成功了

你get到没？！！

记得点赞嘻嘻