(一)搭建环境利用babel转换为es5的方法

本节知识点

• ECMA6环境的搭建

概述

ECMA6 是ECMA5的进化版 ，现在流行的框架都用的是ECMA6的语法，所以有必要去学习一下
但是ECMA支持度不太好，他只能支持IE10+ 谷歌，火狐等最先进的版本。所以我们要把这种语法转化成ECMA5.0的语法，要是使用webpack的话，他有自动编译的功能。除了Webpack，我们还可以使用Babel来完成。这节课我们就是用babel把ES6转化成ES5

环境的搭建也可以说是转化

• (一) 创建 一个项目的工程。并在目录下面创建2个文件夹。一个是src一个是dist

src 书写ES6代码的文件夹，写的JS程序都放在这里
dist 利用babel编译的ES5代码的文件夹。在HTML页面需要引入这里的js文件

• (二) 文件夹建立好以后，我们新建一个index.html文件

    
    
    
    


  Hello World !

需要注意的是我们引入的是dist目录下的文件。也就是引入的是我们编译好后的文件

• (三) 编写index.js文件 在src的目录下面新建一个index.js的文件这样方便对应

在index.js里面敲一个最简单的

let a =2 ;
window.alert(a);

这里我用了left来声明变量，就是为了测试ESMA6的语法

初始化项目 安装babel-cli 和babel-preset-es2015这两个包

• (一) 第一步要先安装babel-cli 和babel-preset-es2015这两个包

在安装babel之前我们需要npm来初始化项目 npm init即可

npm init  -y

然后我们安装babel-cli,只是这样还不能成功安装。

npm install -g babel-cli

接着 安装babel-preset -es2015 这个包

npm install babel-preset-es2015 --save

装完后检查一下 package.json下面是否有

  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }

• (二) 第二部 在根目录下面新建一个后缀名是.babelrc文件

在里面写入

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

• (三) 第三部 简化操作命令

在package.json里面找到

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

把上面的代码修改为

  "scripts": {
    "build": "babel src/index.js -o dist/index.js" /*文件名称和路径参照你自己写的文件名称和路径*/
  }

这样每次操作的时候就直接敲

npm run build 来进行转换了

当然了你 要是需要很多文件，也可以自己敲指令那样就没有第三部了。直接在里面敲

babel src/index.js -o dist/index.js  /*参照对应的文件和路径*/

以上就是ES6环境搭建转化为ES5的方法