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 // ...
随机推荐
- PHP中获取当前页面的完整URL & php $_SERVER中的SERVER_NAME 和HTTP_HOST的区别
#测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<b ...
- oracle表空间中PCTFREE, PCTUSED, INITRANS, MAXTRANX参数的解释
1. PCTFREE 要形容一个 BLOCK 的运作,我们可以把一个 BLOCK 想成一个水杯.侍者把水倒入放在我们面前的水杯,要多满呢,我们要求他倒 9 分满好了,这时候 PCTFREE 代表着设定 ...
- JS中怎样判断undefined
- c3p0 APPARENT DEADLOCK!!! Creating emergency threads for unassigned pending tasks
2018-01-04 15:02:03,319 ---com.mchange.v2.async.ThreadPoolAsynchronousRunner: com.mchange.v2.async.T ...
- FirstLetterUtil
package cn.edu.hbcf.common.utils; public class FirstLetterUtil { private static int BEGIN = 45217; p ...
- linux-centos jdk安装
第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...
- (转)RISC-V结构逻辑图
转载地址:http://blog.csdn.net/zzwu/article/details/54810162 说明: 执行6级流水作业: 1. fetch(取指) 2. decode(译码) 3. ...
- Chrome开发者工具之Network面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- 第一百四十一节,JavaScript,封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
- 关键字final 分别修饰一个类,一个方法,一个变量,各起什么作用
关键字final 分别修饰一个类,一个方法,一个变量,各起什么作用 解答:final修饰类是不能被继承 fianl修饰方法不能在子类中被覆盖 final修饰变量,称为常量,初始化以后不能改变值.