搭建babel编译es6代码环境
2018-04-06 本文已影响0人
梦想成真213
随着es6,es7,es8等新标准的出现，我们在项目中为了更好的体验和使用这些新特性，但是在浏览器中又不能直接运行，所以我们就需要一个环境来将代码编译成浏览器可以运行的代码，这就需要用到babel来编译。
这个目录也可以作为平时练习es6等新特性的开发体验目录。前提是你已经安装了node环境。
一：新建目录（babel-compile-es6）(windows系统)
mkdir babel-compile-es6
cd babel-compile-es6
npm init
二：安装babel环境依赖
npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
三：新建.babelrc文件
文件里面写入如下代码：
{
"presets":["es2015","latest"],
"plugins":[]
}
四：全局安装babel-cli命令行
npm install -g babel-cli
babel --version
五：运行babel命令，编译文件
新建一个es6语法的js文件
//es6-module/util.js
const firstFun = () => {
console.log('i am first es6 module');
}
const mapArr = [1,2,3];
const mapFun = () => {
const result = mapArr.map(item => item + 1);
console.log(result);
}
firstFun();
mapFun();
运行babel命令：
babel ./es6-module/util.js
运行结果如下：
可以看到代码被编译成了es5标准的代码。
六：最后我们在浏览器中跑一下看看效果
我们需要将编译的代码输出到一个文件里面，然后在html中引入即可。
新建一个compiled文件夹来放编译之后的文件。
编译util.js到compiled文件下
babel ./es6-module/util.js --out-file ./compiled/compiled-util.js
可以看到compiled文件夹下出现了一个compiled-util.js文件
最后html文件引入，然后浏览器运行一下：
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>babel compile es6 test</title>
</head>
<body>
babel compile es6 test
<script type="text/javascript" src="compiled/compiled-util.js"></script>
</body>
</html>
控制台打印结果如下：
