Babel 用于将 ES6 的代码转化为 ES5,使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel,以及一些相关的配置。

学习 Babel 可以通过其手册 Babel handbook。

其中包含多语言版本,分为用户手册插件手册。这是一个很好的学习 Babel 的资料。

babel-cli

在 node 和 npm 环境安装好的前提下,安装 babel,如下:

npm install --global babel-cli

安装完成后就可以编译文件了。

babel main.js

编译后的文件显示在终端上,可以添加其他命令让它输出到指定文件下:

babel example.js --out-file compiled.js

babel example.js -o compiled.js

或将整个目录编译成一个新的目录:

babel src --out-dir lib

babel src -d lib

但这很麻烦,并且并不是一个很好的解决方案,请看下一节项目内运行 babel-cli。

在项目内运行 babel-cli

初始化项目

npm init

再安装 babel-cli

npm install --save-dev babel-cli

项目中的package.json应该包含如下内容:

{
"name": "learn-es6",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.10.1"
}
}

添加 npm scripts 命令。

{
"name": "learn-es6",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel 大专栏  如何使用 babel-cli": "^6.10.1"
}
}

此时在终端里运行

npm run build

还不能成功编译,因为没有配置.babelrc文件。

配置.babelrc

通过配置.babelrc来告诉 babel 来做什么。

在项目的根路径下创建.babelrc文件。然后输入以下内容作为开始:

{
"presets": [],
"plugins": []
}

为了让 babel 将 ES2015 转化为 ES5,我们要安装如下:

npm install --save-dev babel-preset-es2015

安装完成后在.babelrc中添加参数:

{
"presets": [
+ "es2015"
],
"plugins": []
}

现在在项目src/main.js中写一些 ES2015 的代码试试吧。

let a = 1

在终端中输入命令

npm run build

执行后终端中显示:

> learn-es6@1.0.0 build c:gitWorkSpacelearn-es6
> babel src -d lib

然后可以看到目录中出现了lib/main.js

"use strict";

var a = 1;

即编译成功。

配置.jshintrc

若编辑器中安装了 jshint 语法检查的插件。默认对于 ES2015 的代码可能会报错或者警告,看着可能会不爽。我们可以在配置文件中将它设置为允许 ES2015 的模式。

在项目根目录下创建文件.jshintrc。内容如下:

{
"asi": true,
"esversion": 2015
}

上述文件我分别设置了,使用无分号模式,es 版本使用 2015。

关于.jshintrc的更详细配置可以参见官方示例:https://github.com/jshint/jshint/blob/master/examples/.jshintrc

好,babel 就说到这里,下面开始进入真正的 ES2015 的学习!

如何使用 babel的更多相关文章

  1. babel presets stage-x

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...

  2. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  3. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

  4. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  6. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  7. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  8. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

随机推荐

  1. 四、Antd组件扩展

    注意:先安装扩展,在安装antd框架,否则会提示 一.安装扩展 1.组件 dva 查看项目依赖 原因是我全局安装,依赖为空, npm i dva 查看依赖 cli装global 当访问报错: Warn ...

  2. Java 性能优化:面向对象及基础类型使用优化

    性能优化是个大筐,很多东西都能往里面装.虽说性能优化的具体方面比较多,但万丈高楼从地起,这里还是从Java最基本的一些入门知识相关的使用优化进行一些做些总结和建议.如何连最基本的API使用都不会,或不 ...

  3. python 流行库、库的基本用法

    进入github,输入python 点击see topic 进入python流行的库  链接 https://github.com/topics/python 1.QuantLib 金融衍生品数据库 ...

  4. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  5. JZOJ-2019-11-7 A组

    T1 Input 从文件 awesome.in 中读入数据. 第一行 2 个用空格隔开的整数 \(n\), \(P\). 第二行 n 个用空格隔开的整数 \(A_1, \cdots , A_n\). ...

  6. SPOJ 423 Assignments 状态DP

    这个题目搁置了这么久,终于搞完了. 给n个人分配n个课程,已经告诉了你n个人对哪几门感兴趣,问最多有多少种分配方式 我刚开始都没找到这怎么还可以状态dp,哪来的状态转移,想用暴力DFS,果断TLE的妥 ...

  7. tensorflow 分布式训练

    TF实现分布式流程 1.创建集群 ClusterSpec & Server cluster = tf.train.ClusterSpec({"ps": ps_hosts, ...

  8. [CF百场计划]Codeforces Round #617 (Div. 3)

    A. Array with Odd Sum Description You are given an array \(a\) consisting of \(n\) integers. In one ...

  9. Linux 杀掉所有Java进程

      ps -ef | grep java | grep -v grep | awk '{print $2}' | xargs kill -9 管道符"|"用来隔开两个命令,管道符左 ...

  10. 主导SEO成败的关键是细节的布局,细数SEO三大布局思路

    有的人认为SEO操作就类似车间工作,有一个完整的流程,整套流程下来网站就会有一个好的排名.这样是不对的,优化的着重点是要有一个好的思维,技巧和策略,把这些着重点相结合的运用到SEO优化中,很大的机率会 ...