(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 的方法
