搭建babel编译es6代码环境

作者: 梦想成真213 | 来源:发表于2018-04-06 14:21 被阅读0次

ES6
Webpack和Babel
es6-selfnote
环境搭建
搭建babel编译es6代码环境
ES6标准入门摘要（Babel 、let 、 const）
第三章：实战（深入浅出 Webpack 笔记）
17.babel
从零开始写一个 Babel 插件
babel

随着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>

控制台打印结果如下：