(一)搭建环境
2018-06-07 本文已影响0人
我拥抱着我的未来
(1)搭建环境
- 因为在es6的语法在es5中大部分不支持。所以必须要装一个babel的转化为es5,这样才可以。不过随着时代的发展。迟早都会支持es6
(2)搭建环境步骤
概述
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文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>ECMA6环境的搭建</title>
<script src="./dist/index.js"></script>
</head>
<body>
Hello World !
</body>
</html>
需要注意的是我们引入的是dist目录下的文件。也就是引入的是我们编译好后的文件
<script src="./dist/index.js"></script>
- (三) 编写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的方法
