搭建babel将es6转es5环境

前言

babel 6与之前版本的区别: 之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel6中,将babel拆分成两个包: 和 。如果你想要在CLI(终端或REPL)使用babel就下载 ,如果想要在node中使用就下载 。 babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。

Babel提供 工具,用于命令行转码。以下摘自阮一峰。

它的安装命令如下。

基本用法如下:

上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

然后改写package.json

转码时执行:

如果某些代码需要调用Babel的API进行转码,就要使用 模块。以下摘自阮一峰。

它的安装命令如下。

然后,在项目中就可以调用 。

例子:

上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。 **

Demo:1.工具(gulp)转换法

项目目录结构:

在项目中安装 gulp执行:

安装转码规则:

此时的package.josn文件:

编写gulpfile.js文件,文件内容如下所示:

当我们在当前项目目录下运行

命令后,会发现原本在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js,并放在了lib文件夹里面。

可能报错和原因

package.json文件不应该是空的。

如果你有空的包json文件,只需添加{}。

然后再试一次就行。 **

Demo:2.不使用工具

你得有.babelrc文件。Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。 该文件用来设置转码规则和插件,基本格式如下。

配置项目规则 如下:

选择前言中的方法,安装 包:

执行命令:

之后,你会看到js文件夹下的.js文件,全部转码到lib文件夹下,检查一下lib文件夹中的.js是否已经变为es5了。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180206G0PRDX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券