Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用ES6、ES7编写程序,而不用担心现有环境是否支持。

一、全局安装babel工具

在保证node和npm安装完成前提下在终端输入以下命令:

$ npm install -g babel-cli

二、配置 .babelrc文件

Babel的配置文件是.babelrc,存放在项目的根目录下。

注意:windows不允许文件.开头,所以创建一个a.txt然后用CMD→$ rename a.txt .babelrc来改名。

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

{
  "presets": ["es2015"],//设定转码规则(翻译器)
  "plugins": []
}

三、安装babel-preset-es2015

虽然已经安装了babel-cli,只是这样还不能成功进行转换,我们还需要安装转换包才能成功转换。

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

安装完成后,我们可以看一下我们项目文件夹的package.json文件,已经多了devDependencies选项。

四、使用

终端输入如下命令:

$ babel  待转换文件 -o 转换后文件

现在你可以尽情使用babel了!

JavaScript 编译器-Babel的更多相关文章

  1. Babel:JavaScript编译器

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

  2. 《前端之路》之 Babel 下一代 JavaScript 语法编译器

    写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断 ...

  3. react编译器jsxTransformer,babel

    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransformerJSX代码 ...

  4. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  5. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换

    现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...

  6. JavaScript 基础:Babel 转译 class 过程窥探

    零.前言 虽然在 JavaScript 中对象无处不在,但这门语言并不使用经典的基于类的继承方式,而是依赖原型,至少在 ES6 之前是这样的.当时,假设我们要定义一个可以设置 id 与坐标的类,我们会 ...

  7. 如何选择JavaScript构建工具之Babel、Browserify、Webpack、Grunt以及Gulp

    当我们开始一个新的 JavaScript 项目时,我们需要考虑的第一件事就是搭建一个前端编译环境.但是在面对众多的 JavaScript 构建工具时,我们却无所适从,不知道究竟哪一个才是最适合我们的. ...

  8. 顶级的JavaScript框架、库、工具及其使用

    几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...

  9. Babel 入门指南

    Babel 入门指南 ​⚠️ 注意: Babel 可以与很多构建工具(如 Browserify.Grunt.Gulp 等)进行集成.由于本教程选择 Webpack ,所以只讲解与 Webpack 的集 ...

随机推荐

  1. .Net基础篇_学习笔记_第五天_流程控制while循环002

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Redis的复制(Master/Slave)、主从复制、读写分离 (下)

    哨兵模式(就是反客为主的自动版) 能够自动监控主机是否故障,如果故障了根据投票数自动将从机变成主机 1创建哨兵文件 touch sentinel.conf [root@localhost myredi ...

  3. 警告:stream not available

    1.修改mybatis.org//DTD Config 3.0//EN更改为mybatis.org//DTD//EN 2.将url换成http://mybatis.org/dtd/mybatis-3- ...

  4. SpringBoot整合redis缓存(一)

    准备工作 1.Linux系统 2.安装redis(也可以安装docker,然后再docker中装redis,本文章就直接用Linux安装redis做演示) redis下载地址: 修改redis,开启远 ...

  5. Rocksdb基本用法

    rocksdb 用法 rocksdb 介绍 RocksDB是使用C++编写的嵌入式kv存储引擎,其键值均允许使用二进制流.由Facebook基于levelDB开发, 提供向后兼容的levelDB AP ...

  6. JS基础-全方面掌握继承

    前言 上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行, ...

  7. Android 本地化适配:RTL(right-to-left) 适配清单

    本文首发自公众号:承香墨影(ID:cxmyDev),欢迎关注. 一. 序 越来越多的公司 App,都开始淘金海外,寻找更多的机会.然而海外市场千差万别,无论是市场还是用户的使用习惯,都有诸多的不同. ...

  8. (二)spring 高级装配-Condition -条件化的bean

    Condition:满足某个特定条件的情况下创建bean 条件化配置bean: a:@Conditional 指定一个class ,它指明了通过条件对比的类.如果没有指定class则通过Condito ...

  9. Channel使用技巧

    前言 Go协程一般使用channel(通道)通信从而协调/同步他们的工作.合理利用Go协程和channel能帮助我们大大提高程序的性能.本文将介绍一些使用channel的场景及技巧 场景一,使用cha ...

  10. node连接数据库

    一.在package.json依赖模块添加: "mysql" : "latest",执行npm install: 二.module目录下新建mysql.js: ...