1、它的安装命令如下。

全局安装 :$ npm install --global babel-cli
项目下安装: $ npm install -g babel-cli --save-dev

2、配置.babelrc文件

 这个文件配置的是编译es6的规则,配置如下:

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

3、转码规则:

# 转码结果输出到标准输出
$ babel example.js # 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js # 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib # -s 参数生成source map文件
$ babel src -d lib -s 实时监测es6文件

babel ECAMscript2015.js --watch -o ECAMscript20151.js

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

4、用npm init 创建package.json,修改其配置如下:

{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
"author": "",
"license": "ISC"
}

5、执行

$ npm run build
就能转译啦

安装es6编译babel的更多相关文章

  1. 使用babel将ES6编译成ES5

    现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...

  2. 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import

    用nuxt集成koa2做vue后台,官方自带脚手架搭建的koa2仍是ES5语法,在构建koa2时默认的nodemon是没有使用babel编译的, 所以首先需要在启动命令后加上--exec babel- ...

  3. 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用

    深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及 ...

  4. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  5. 安装maven编译环境

    安装maven编译环境 1.默认已经装好yum并配置好yum源(推荐使用163yum源) 2.安装JDK 3.安装相关依赖环境(root用户登陆) yum install -y cmake lzo-d ...

  6. CentOS离线安装GCC编译环境

    gcc编译环境rpm下载 安装相关的rpm包,具体版本可能随时间变化而变化,可以去以下地址下载: 重庆大学镜像:http://b.mirrors.lanunion.org/CentOS/中国科学技术大 ...

  7. windows平台下安装、编译、使用mongodb C++ driver

    本博客将记录在Win8.1 ,VS2013环境下编译.配置mongodb C++ driver的流程. 1.下载预备 下载Boost:http://sourceforge.net/projects/b ...

  8. eclipse安装反编译工具

    身为一名程序员来说,日常最常做的就是编写代码和查看别人写好的源代码了,有时候打开别人写的class文件发现根本不是自己想要的,所以给大家介绍一种eclipse中反编译class文件的工具. 第一步:下 ...

  9. [转]Caffe在Linux下的安装,编译,实验

    Caffe在Linux下的安装,编译,实验  原文地址:http://www.cnblogs.com/evansyang/p/6150118.html 第一部分:Caffe 简介 caffe是有伯克利 ...

随机推荐

  1. 一个Ajax读数据并使用IScroll显示辅助类

    花了2天时间对iscroll进行了一些封装,方便进行ajax读取数据和显示 1.IScroll直接使用的话还是挺麻烦的,特别是牵涉到分页加载动态加载数据时,以下是核心实现代码. 2.Loading提示 ...

  2. oi回忆录

    堆在一起写成流水账好了,算是记录一下自己的oi历程.  [伊始] 一直到高中以前,我从来没有接触过任何oi相关的东西. 直到初三的那个暑假,在去金中报名的时候,报名表上面有一栏要填暑假想参加的夏令营. ...

  3. HTTPS加密那点事-对称、非对称加密、数字证书

    转自:[漫画]https 加密那点事 首先,HTTP协议的缺点:没有对数据进行加密,都是明文传输的.如果要改进这种明文传输的协议,该如何做呢? 对称加密: 在每次发送真实数据之前,服务器先生成一把密钥 ...

  4. Lambda表达式概念与基本语法

    Lambda表达式是Java 8的重要更新,一个被广大开发者期待已久的新特性.Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被 ...

  5. 获取spring的IOC核心容器,并根据id获取对象

    public class Client { /** * 获取spring的IOC核心容器,并根据id获取对象 * ApplicationContext的三个常用实现类 * classPathXmlAp ...

  6. JAVA进阶16

    间歇性混吃等死,持续性踌躇满志系列-------------第16天 1.桌球游戏小项目 ①窗口加载 import javax.swing.*; public class BallGame exten ...

  7. 关于this绑定的四种方式

    一.前言 我们每天都在书写着有关于this的javascript代码,似懂非懂地在用着.前阵子在看了<你不知道的JavaScript上卷>之后,也算是被扫盲了一边关于this绑定的四种方式 ...

  8. mina statemachine解读(二)

    这里主要讲下对外接口暴露的处理. // 创建对外接口对象 TaskWork taskWork = new StateMachineProxyBuilder().setStateContextLooku ...

  9. dubbo注册中心

    官方推荐的是zookeeper注册中心. 1.Multicast 注册中心 Multicast 注册中心不需要启动任何中心节点,只要广播地址一样,就可以互相发现. 提供方启动时广播自己的地址消费方启动 ...

  10. SVM小白教程(1):目标函数

    关于 SVM(支持向量机),网上教程实在太多了,但真正能把内容讲清楚的少之又少.这段时间在网上看到一个老外的 svm 教程,几乎是我看过的所有教程中最好的.这里打算通过几篇文章,把我对教程的理解记录成 ...