babel本地编辑环境搭建-白红宇

babel本地编辑环境搭建

今天讲的是babel搭建本地环境，众所周知，现如今，javascript已经发布了es7版本，但是目前环境大多数只能支持到es5，连nodejs也不能完全支持es6，es7。今天将的babel能将我们写的es6，es7的代码转换成es5，从而让现有环境能好好运行我们的js。

1.babel安装

babel是通过npm安装的，npm是node上的一个模块，所以环境要求，先要安装node.js，然后安装npm，之后再安装babel-cli(babel命令行工具)。node.js下载地址： [图片上传失败...(image-c2bfa1-1535292856666)]

查看版本node和npm版本号：

[图片上传失败...(image-58c656-1535292856666)]

babel-cli安装，国内环境建议将npm的源缓存淘宝的再安装。

npm config set registry https://registry.npm.taobao.org/npm config get registry复制代码

输入npm install babel-cli -g来全局安装babel-cli，然后查看到了版本表示安装成功了。

npm install babel-cli -gbabel -V复制代码

[图片上传失败...(image-c85658-1535292856666)]

2.使用

我们先找一个目录，然后用npm来初始化一个项目，用来搭建我们的babel环境。

[图片上传失败...(image-f2d896-1535292856666)]

我们进到刚才的babel目录，然后打开命令行工具输入一些命令来验证一下我们的环境。

babel-node(a => a + 1)(2)3复制代码

[图片上传失败...(image-a49cef-1535292856666)]

可以看到，上面我们顺利执行了一个es6的箭头函数。这里babel-node是babel提供的一个编译工具，可以采用命令行方式执行我们的js代码，下面我们在用babel-node执行一个js文件。我们进入工程目录babel并新建index.js，并输入以下代码。

let a = [1,2,3];a.map((row) => {	console.log(row)})复制代码

然后在命令行输入以下命令。 [图片上传失败...(image-425c5b-1535292856666)] 可以看到，babel-node运行了我们es6的代码。下面将通过一些配置，来完善我们的babel环境。

3配置

我们在babel目录新建.babelrc，Windows下可以用如下命令创建。

echo. > .babelrc复制代码

用记事本打开，输入以下内容

{    "presets": ["es2015", "stage-2"],  //设置转码规则    "plugins": ["transform-runtime"]  //设置插件 }复制代码

这里我们配置好了babel的转码规则，转码成es2015.官方提供以下的规则集，可以根据需要安装：

# ES2015转码规则npm install --save-dev babel-preset-es2015# react转码规则npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个npm install --save-dev babel-preset-stage-0npm install --save-dev babel-preset-stage-1npm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-stage-3复制代码

这里我们只需要转换成es2015，这里我们安装我们需要的部分： npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev ，如需其他配置，可以修改.babelrc文件，然后安装上面对于的插件。我们再打开我们babel项目下的package.json文件，做如下修改。

{  "name": "babel",  "version": "1.0.0",  "description": "a babel project",  "main": "index.js",  "scripts": {    "build": "babel src -w -d lib"     //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录，-w其实是-watch的意思，就是监听文件，实时编译输出  },  "keywords": [    "babel"  ],  "devDependencies": {    "babel-core": "^6.26.3",    "babel-plugin-transform-runtime": "^6.23.0",    "babel-preset-es2015": "^6.24.1",    "babel-preset-stage-2": "^6.24.1"  }  "author": "zhujie",  "license": "ISC"}复制代码

现在我们在babel工程目录下新建src目录和lib目录，记得一定要建，不然会报错，然后我们启动我们的babel工程。命令号输入npm run build。这样就启动了我们的babel实时编译功能。这里可以是在在src目录新建main.js，然后输入

//异步加载图片let d;function loadImageAsync(url){    return new Promise((resolve,reject) => {        const image = new Image();        image.onload = function(){            resolve(image);        };        image.onerror = function(){            reject(new Error('error'));        }        image.src = url;    });}复制代码

然后我们打开lib目录下的mina.js,可以看到代码已经被转换。

'use strict';var _promise = require('babel-runtime/core-js/promise');var _promise2 = _interopRequireDefault(_promise);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }//异步加载图片var d = void 0;function loadImageAsync(url) {    return new _promise2.default(function (resolve, reject) {        var image = new Image();        image.onload = function () {            resolve(image);        };        image.onerror = function () {            reject(new Error('error'));        };        image.src = url;    });}复制代码

大功告成！

总结

文中搭建了一个babel能转换es6，es7语法的工程，适应大多数环境，对于不想有太多累赘，仅仅想使用es6，es7语法的情况下是够用的，但是babel其实还有很多功能，babel-register,babel-core,babel-polyfill等工具。这里不做详解，有问题的可以邮件我，15972806478@163.com

最后可以扫描图中二维码来关注我的个人公众号，每天发布各种相关技术。 [图片上传失败...(image-406ffb-1535292856666)]