ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1.ES6的开发环境搭建
建立工程目录:
先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist
-
-
- src:书写ES6代码的文件夹,写的js程序都放在这里。
- dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。
-
编写index.html:
文件夹建立好后,我们新建一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>ES6</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>
初始化项目:
在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:
npm init -y
命令执行完成后,会在项目根目录下生产package.json文件。
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
全局安装Babel-cli:
npm install -g babel-cli
本地安装babel-preset-es2015 和 babel-cli:
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。
"devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" }
新建.babelrc:
{ "presets":[ "es2015" ], "plugins":[] }
简化转化命令:
可以使用npm run build 直接利用webpack进行打包。
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src/index.js -o dist/index.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" } }