Babel编译
Babel的目的就是让你可以使用最新的标准来开发,然后把兼容的问题交给它来完成.比如我如何在使用ES6的语法写完之后将其转换为ES5满足通用性呢?
先用这个最常用的Babel的用法来引入吧.
一 首先在项目中新建一个package.json文件,也可以使用 npm init 自动生成.
这里简单提一下,没有fq的话建议使用国内的淘宝镜像,速度会快很多,特别是类似Bable这样安装的内容比较多的情况,使用下列命令即可
- npm install -g cnpm --registry=https://registry.npm.taobao.org
二 安装babel的命令行工具,babel-cli这里安装到开发环境,之后就可以使用babel相关的命令了.
- cnpm install babel-cli -D
三 安装完成babel-cli之后需要所需编译的预设(preset), 这里我们用到了ES6
- cnpm i babel-preset-es2015 -D
但是在安装完成之后会发现有一个不推荐提示,
- deprecate babel-preset-es2015@* ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
现在已经不提倡使用以上的方法了,而是
- cnpm i babel-preset-env -D
现在东西都装好了,下面开始使用工具吧.
四 新建一个.babelrc用于配置预设presets
- {
- "presets" :["env"]
- }
五 除了预设之外还有插件plugin,
比如我在代码中使用了export和import,如果浏览器不支持这个用法便会报错.可以使用插件来编译为浏览器可兼容的语法.
- {
- "plugins": [
- "transform-es2015-modules-umd"
- ]
- }
当然也需要先 cnpm i babel-plugin-transform-es2015-modules-umd -D 安装到开发环境
六 在package.json中你可以看到已经将之前安装的模块添加到devDependencies中了.
七 在script中添加一个脚本
一般来说会将一个js文件夹下的所有js文件进行编译,使用方式就是babel <dirname> -d <new dirname>, 还有一个很实用的小技巧就是使用-w进行文件监视,避免了重复手动编译的过程.
- "scripts": {
- "build": "babel js -w -d lib"
- },
八 执行 npm run build ,将js文件夹中的js代码编译到lib文件夹中.
九 将其他地方的文件(比如我的index.html中的js)路径修改定位到编译后的文件就可以使用啦!!
在体验了babel之后,最大的体会就是,
写自己的代码,让babel去转换吧!
Babel编译的更多相关文章
- KoaHub.js可借助 Babel 编译稳定运行在 Node.js 环境上
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- React系列文章:Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- webpack打包调试react并使用babel编译jsx配置方法
http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i ...
- es6 babel编译
本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里 ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...
- 前端工程化-webpack(babel编译ES6)
最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...
- babel 编译后 this 变成了 undefined
最近有在用webpack,使用了babel这个模块来编译js jsx文件,但是发现文件编译后this变成了undefined. 源文件 module.exports = React.createCla ...
- 在IDEA(phpStorm)中使用Babel编译ES6
安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...
- ES6 - Babel编译环境搭建
都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y // ...
随机推荐
- unity, access standard shared emission by script
unity 5.1.1f1 personal 用下面方法在脚本中设置standard shader的emssion: gameObject.GetComponent<MeshRenderer&g ...
- 智能指针tr1::shared_ptr、boost::shared_ptr使用
对于tr1::shared_ptr在安装vs同一时候会自带安装,可是版本号较低的不存在.而boost作为tr1的实现品,包括 "Algorithms Broken Compiler Work ...
- IOS使用Charts
近期项目中要做图表功能,为了降低开发量採用的是H5+ECharts来做.这里说一下IOS中怎样使用ECharts以及遇到的问题. 网络模块化单文件引入 <!DOCTYPE html> &l ...
- 记一次kafka客户端NOT_COORDINATOR_FOR_GROUP处理过程
转发请注明原创地址:https://www.cnblogs.com/dongxiao-yang/p/10602799.html 某日晚高峰忽然集群某个大流量业务收到lag报警,查看客户端日志发现reb ...
- Hadoop 2.0 编译问题小结
原文见 http://xiguada.org/hadoop-2-x-compile/ 这些问题是2013年初整理的,不过到目前为止,即使最新的hadoop2.0系列,编译总体上变化不大,因此还能适用. ...
- jdk8 StreamApi
List<User> userList=new ArrayList<>(); userList.add(User.builder().age().name()).build() ...
- 利用JMX统计远程JAVA进程的CPU和Memory
http://songzi0206.iteye.com/blog/1541636 ******************** 从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java ...
- 某某水表-M1卡数据算法分析
# 某某水表-M1卡数据算法分析 ## 卡片数据-----------------------------扇区数据 | 金额:--- |:---13EC 0000 0000 0000 0000 000 ...
- C#调用C++dll文件 运行提示找不到函数的入口点
1.首先用DllAnalyzer查看dll的输出函数名,发现输出的函数名有所变化,多了@xxx和一些别的奇怪的字符,实际上是因为C++重载机制造成的,使用使用extern "C"关 ...
- MapReduce实战(五)实现关联查询
需求: 利用MapReduce程序,实现SQL语句中的join关联查询. 订单数据表order: id date pid amount 1001 20150710 P0001 2 1002 20150 ...