简单使用babel

要使用babel,首先需要了解用的东西?它是一个用来进行ES6转化到ES5的转码器,从而在现有环境中进行执行。

一、配置文件.babelrc(搬运下)

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

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

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

# 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-0 (0安装包含其他3个) $ npm install --save-dev babel-preset-stage-1 (1安装包含其他2个) $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3

然后,将这些规则加入.babelrc

{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }

注意,以下所有Babel工具和模块的使用,都必须先写好.babelrc

四、babel-register

babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js.jsx.es.es6后缀名的文件,就会先用Babel进行转码。

$ npm install --save-dev babel-register

使用时,必须首先加载babel-register

require("babel-register"); require("./index.js");

然后,就不需要手动对index.js转码了。

需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

六、babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令如下。

$ npm install --save babel-polyfill

然后,在脚本头部,加入如下一行代码。

import 'babel-polyfill'; // 或者 require('babel-polyfill');

如果我们要在多个地方使用到 babel-polyfill 的话,我们可以直接使用 babel-runtime 。

安装 babel-plugin-transform-runtime 和 babel-runtime ,并更新 .babelrc 。

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

向plugins中添加”transform-runtime”

{
  "plugins": [
   "transform-runtime"
  ]
}

Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

参考文章:

Babel 入门教程

简单使用babel

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Aloys的开发之路

Eclipse相关问题

MANIFEST.MF文件 在Eclipse的.classpath和runableX.jar中的MANIFEST.MF文件中都指定了可依赖jar包的顺序,所以只...

2796
来自专栏Golang语言社区

配置文件热加载的go语言实现

通常我们更新应用程序的配置文件,都需要手动重启程序或手动重新加载配置。假设一组服务部署在10台机器上,你需要借助批量运维工具执行重启命令,而且10台同时重启可能...

8045
来自专栏前端杂谈

使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

1082
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Ansible部署多个PHP应用程序

本教程是关于在Ubuntu 14.04上使用Ansible部署PHP应用程序的系列文章中的第三篇。第一个教程涵盖了部署应用程序的基本步骤; 在第二个教程介绍更高...

1040
来自专栏不想当开发的产品不是好测试

常用业务接口界面化 in python flask

背景: 对于业务测试来说,有一些基础业务接口是需要经常调用的,如根据userId查询某人的信息,修改某人的xx属性,一般的接口都有验签(或者说token)机制,...

23910
来自专栏西安-晁州

vue.js应用开发笔记

看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

4411
来自专栏计算机编程

Vue 单文件组件详解<1>--简单上手

vue 的webpack的结构非常简单,简单的一眼就可以知道每个目录下是干啥的,在components目录下就有属于我们想要详细解析的内容,这两个vue文件即为...

931
来自专栏前端杂谈

vue-roter2 路由传参

1042
来自专栏有趣的django

Django搭建blog网站(一)

一、前言 1.1.环境 python版本:3.6 Django版本:1.11.6 1.2.预览效果 最终搭建的blog的样子,基本上满足需求了。框架搭好了,至于...

8278
来自专栏Android开发指南

eclipse使用和快捷键

4169

扫码关注云+社区

领取腾讯云代金券