随着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>
控制台打印结果如下: