版权声明:未经本人允许,请勿转载 https://blog.csdn.net/bigbear00007/article/details/88536877
进行环境部署之前需安装node.js
第一步,搭建项目目录
创建两个文件夹
dist:存放es6源码
js:存放es5代码
dist文件下新建init.js文件插入测试代码
let a = 'hello es6';
console.log(a)
项目根目录新建index.html 并加载js目录下的代码,进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6环境搭建</title>
<script src="./js/init.js"></script>
</head>
<body>
</body>
</html>
需要注意的是在引入js文件时,引入的是js目录下的文件。
第二步,初始化项目
在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:
npm init -y
-y代表全部默认同意,就不用一次次按回车了。
命令执行完成后,会在项目根目录下生产package.json文件。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
第三步,安装环境
全局安装Babel-cli:在终端中输入以下命令;
npm install -g babel-cli
本地安装babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-cli
安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
第四部,新建.babelrc
{
"presets":[
"es2015"
],
"plugins":[]
}
这个文件我们建立完成后,执行一下命令就可以进行ES6转化为ES5的语法。
babel dist/init.js -o js/init.js
第五步,简化转化命令:
打开package.json文件,把文件修改成下面的样子。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel dist/init.js -o js/init.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
修改好后,以后我们就可以使用 npm run build 来进行转换了