本文主要参照阮一峰的es6入门,为提高自己写了一份随笔。

原文地址请戳这里  ECMAScript 6 入门

ECMAScript 6是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

但是目前浏览器对es6不完全兼容,需要借住babel编译。

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

node 安装babel ;

$ npm install --save-dev babel-preset-es2015
配置 .babelrc文件在目录下。

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

{
"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
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

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

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

命令行转码babel-cli

Babel提供babel-cli工具,用于命令行转码。

$ npm install --global babel-cli   //在全局安装

$ npm install --save-dev babel-cli //在项目中安装
然后初始化项目
$npm init
配置一些基本的参数。
{
// ...
"devDependencies": { //开发依赖
"babel-cli": "^6.0.0"
},
"scripts": {  
"build": "babel src -d lib" //src下面的js文件,转码到lib文件下。
},
}
然后执行  $ npm run build

或者执行常用的命令行。
# 转码结果输出到标准输出
$ 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

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命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。



es6 babel编译的更多相关文章

  1. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  2. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  3. KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上

    koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...

  4. webpack打包调试react并使用babel编译jsx配置方法

    http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...

  5. ES6初探——编译环境搭建

    不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...

  6. React系列文章:Babel编译JSX生成代码

    上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...

  7. 前端工程化-webpack(babel编译ES6)

    最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...

  8. 在IDEA(phpStorm)中使用Babel编译ES6

    安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...

  9. webstorm 配置node babel编译es6

随机推荐

  1. mysql数据库的系统操作基本操作

    本文主要总结并记录一下简单且常用的mysql 在cmd 窗口中操作的基本命令 命令停止mysql 数据库服务 1.(cmd)命令行 启动:net start mysql 停止:net stop mys ...

  2. docker故障问题修复

    systemctl start docker启动 systemctl restart docker重启 执行 vi /etc/sysconfig/selinux , 把 selinux 属性值改为di ...

  3. nodejs知识点

    rss(resident set size):所有内存占用,包括指令区和堆栈. heapTotal:”堆”占用的内存,包括用到的和没用到的. heapUsed:用到的堆的部分. external: V ...

  4. Linux单用户CS模型TCP通讯完全注释手册

    Linux单用户CS模型TCP通讯完全注释手册 server 描述 实现一个简单的Linux单用户CS通讯,客户端发送一串字符串,服务器将其转换为大写后返回. server 代码 ``` #inclu ...

  5. ACM1021:Fibonacci Again

    Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...

  6. 【Mac】解决「无法将 chromedriver 移动到 /usr/bin 目录下」问题

    问题描述 在搭建 Selenium 库 + ChromeDriver 爬虫环境时,遇到了无法将 chromedriver 移动到 /usr/bin 目录下的问题,如下图: 一查原来是因为系统有一个 S ...

  7. Java动态代理代码快速上手

    动态代理的两个核心的点是:代理的行为 和 代理机构. 举个例子,上大学的时候,很多同学吃午饭的时候都是叫别人带饭,有一个人H特别热心肠,想了一个办法,他在门口挂了个公示牌,每天有谁想要找人带饭就写公告 ...

  8. Oracle Data Provider for .NET Support for Microsoft .NET Core

    Oracle Data Provider for .NET Support for Microsoft .NET Core的官方地址,记录下来,按照官方描述,会在2017年底左右发布,暂时还没有看到相 ...

  9. linux 下c语言的pwd 实现

    20155211实现mypwd 关于pwd 在Linux层次结构中,用户可以在被授权的任意目录下利用mkdir命令创建新目录,也可以利用cd命令从一个目录转换到另一个目录.然而,没有提示符来告知用户目 ...

  10. 2016-2017-2 《Java程序设计》课程总结 - 20155214

    2016-2017-2 <Java程序设计>课程总结 - 20155214 目录 一.每周学习总结及实验报告链接汇总 二.代码托管 给出statistic.sh的运行结果,说明本学期的代码 ...