es6 babel编译
本文主要参照阮一峰的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编译的更多相关文章
- ES6 - Babel编译环境搭建
都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y // ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- webpack打包调试react并使用babel编译jsx配置方法
http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...
- ES6初探——编译环境搭建
不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...
- React系列文章:Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- 前端工程化-webpack(babel编译ES6)
最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...
- 在IDEA(phpStorm)中使用Babel编译ES6
安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...
- webstorm 配置node babel编译es6
随机推荐
- mysql数据库的系统操作基本操作
本文主要总结并记录一下简单且常用的mysql 在cmd 窗口中操作的基本命令 命令停止mysql 数据库服务 1.(cmd)命令行 启动:net start mysql 停止:net stop mys ...
- docker故障问题修复
systemctl start docker启动 systemctl restart docker重启 执行 vi /etc/sysconfig/selinux , 把 selinux 属性值改为di ...
- nodejs知识点
rss(resident set size):所有内存占用,包括指令区和堆栈. heapTotal:”堆”占用的内存,包括用到的和没用到的. heapUsed:用到的堆的部分. external: V ...
- Linux单用户CS模型TCP通讯完全注释手册
Linux单用户CS模型TCP通讯完全注释手册 server 描述 实现一个简单的Linux单用户CS通讯,客户端发送一串字符串,服务器将其转换为大写后返回. server 代码 ``` #inclu ...
- ACM1021:Fibonacci Again
Problem Description There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) ...
- 【Mac】解决「无法将 chromedriver 移动到 /usr/bin 目录下」问题
问题描述 在搭建 Selenium 库 + ChromeDriver 爬虫环境时,遇到了无法将 chromedriver 移动到 /usr/bin 目录下的问题,如下图: 一查原来是因为系统有一个 S ...
- Java动态代理代码快速上手
动态代理的两个核心的点是:代理的行为 和 代理机构. 举个例子,上大学的时候,很多同学吃午饭的时候都是叫别人带饭,有一个人H特别热心肠,想了一个办法,他在门口挂了个公示牌,每天有谁想要找人带饭就写公告 ...
- Oracle Data Provider for .NET Support for Microsoft .NET Core
Oracle Data Provider for .NET Support for Microsoft .NET Core的官方地址,记录下来,按照官方描述,会在2017年底左右发布,暂时还没有看到相 ...
- linux 下c语言的pwd 实现
20155211实现mypwd 关于pwd 在Linux层次结构中,用户可以在被授权的任意目录下利用mkdir命令创建新目录,也可以利用cd命令从一个目录转换到另一个目录.然而,没有提示符来告知用户目 ...
- 2016-2017-2 《Java程序设计》课程总结 - 20155214
2016-2017-2 <Java程序设计>课程总结 - 20155214 目录 一.每周学习总结及实验报告链接汇总 二.代码托管 给出statistic.sh的运行结果,说明本学期的代码 ...