本文主要参照阮一峰的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. 【leetcode】867 - Transpose Matrix

    [题干描述] Given a matrix A, return the transpose of A. The transpose of a matrix is the matrix flipped ...

  2. Navicat 12 连接 Mysql8.0 使用日志

    目前最新的Mysql8.0 + Navicat12,使用中常有一些棘手问题 解决了的都会贴出来,受益于小伙伴们 我们的目标是发现问题,解决问题,欢迎大家贴出自己使用时遇到的问题,集思广益 好了,上干货 ...

  3. T+API HTTPServer服务端

    该服务端是一个HTTP服务器,这样其他语言调用也方便. 出于某些原因,只支持Post方法,不打算支持其他方法,例如Get. API所接受的参数将以Json传送,回传的数据也是一个Json数据,一切只是 ...

  4. 大数据学习--day13(字符串String--源码分析--JVM内存分析)

    字符串String--源码分析--JVM内存分析 String 类的对象 , 是不可变的字符串对象呢 这个不可变很重要,之后要讲的intern()也离不开它的不可变性. https://www.cnb ...

  5. ruby中的循环——times

    times:能够得知循环的次数 格式: 循环次数.times do 希望循环的处理 end 或者可省略do~end,用{~}代替: 循环次数.times{ 希望循环的处理 } 循环从第0次开始,可以看 ...

  6. TCP/IP协议的数据传输过程详解——IP与以太网的包收发操作

    MTU:一个网络包的最大长度,以太网中一般是1500字节:(含有头部长度,包括IP头部,TCP头部,不包括MAC头部) MSS:除去头部后,一个网络包所能容纳的TCP的数据的最大长度 下图为TCP/I ...

  7. U盘,移动硬盘显示显示需要格式化怎么修复

    冷静别怕,用windows系统自带磁盘修复CHKDSK命令即可解决此问题. 首先,在开始菜单栏站到“运行”窗口,也就是c:\(命令提示符),win7可直接在开始菜单的搜索窗口中输入“cmd”. 其次, ...

  8. Visual SVN 备份

    -----------2018.11.27更新-------------- 这两天把SVN的服务器重做了,按照之前的LOAD,DUMP的方法备份恢复.发现了以下问题: 1,时间比较长,备份和恢复都很长 ...

  9. LIS(单调队列优化 C++ 版)(施工ing)

    #include <iostream> using namespace std; #include <cstdio> ; ,x,stack[MaxN]; int main(){ ...

  10. 实验楼学习linux第一章第四节linux目录结构及文件基本操作

    linux目录结构及文件基本操作 常用命令 切换目录 cd 当前目录 . 上一级目录 .. (.和..开头的都是隐藏文件) 查看隐藏文件 ls -a 上一级所在目录 - 当前用户home目录 ~ 获取 ...