babel无法编译?
ECMAScript 6(ES6)
的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)
都还普及呢。现代浏览器对ES6
新特新或多或少的有些支持,但支持度不高,所以要想在浏览器中直接使用ES6
的新特性,还得等上一段时间。
对ES6
的普及起到至关重要的就不得不说babel
了。babel
可以将ES6
代码完美地转换为ES5
代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6
的特性。
对于刚开始使用babel
的人,可能会碰到一些问题,因为网上对于babel
的使用教程基本上是针对babel 6
之前的版本,而babel 6
对于之前版本有一些变化。
因为之前版本只要安装一个
babel
就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。所以babel 6
拆分成两个包:babel-cli
和babel-core
。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli
,如果想要在node中使用就下载babel-core
。babel 6
已结尽可能的模块化了,如果还用babel 6
之前的方法转换ES6
,它会原样输出,并不会转化,因为需要安装插件。如果你想使用箭头函数,那就得安装箭头函数插件npm install babel-plugin-transform-es2015-arrow-functions
。
下面来实践下(命令行使用babel)。
安装babel:
npm install -g babel
命令行转化js文件:
babel es6.js
提示:
The CLI has been moved into the package `babel-cli`.
npm install -g babel-cli
安装babel-cli
:
npm install -g babel-cli
再次转化:
babel es6.js
命令行输出:
[1, 2, 3].map(x => x * x)
可以看到并没有像期望的那样转化为ES5
,因为没有安装插件。上面使用了箭头函数,所以要安装箭头函数插件。但是这样太麻烦,如果使用了ES6
的其他特性,还要安装其他插件,可以只下载一个插件:
npm install babel-preset-es2015
这个插件包含了其他插件。
安装完插件后,运行:
babel es6.js --presets es2015
输出:
[1, 2, 3].map(function (x) {
return x * x;
})
上面已经得到想要的结果了。
babel
可以将ES6文件转换输出到另一个文件:
babel es6.js -o es5.js
# 或者
babel es6.js --out-file es5.js
也可以用于转换整个目录:
babel -d lib/ src/
运行babel-node
命令可以直接在命令行运行ES6代码:
babel-node
> console.log([1,2,3].map(x => x * x))
[ 1, 4, 9 ]
也可以直接运行ES6文件。
babel es6.js
> [1, 2, 3].map(function (x) {
return x * x;
})
(完)
babel无法编译?的更多相关文章
- babel使用入门以及使用webpack+babel来"编译"你的JS代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...
- Hbuilder中添加Babel自动编译
Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...
- 利用babel自动编译es6文件
一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...
- 理解Babel是如何编译JS代码的及理解抽象语法树(AST)
Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是? 很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器都 ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- browserify babel gulp 没有编译import的文件
1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...
- babel 编译后 this 变成了 undefined
最近有在用webpack,使用了babel这个模块来编译js jsx文件,但是发现文件编译后this变成了undefined. 源文件 module.exports = React.createCla ...
- 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)
大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
随机推荐
- P2758 编辑距离
题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一个字符: !皆为小写字 ...
- [教程] 【【【【odex教程之jar】】】】/system/framework里面的jar做odex g13
dexopt-wrapper core.jar core.odex dexopt-wrapper ext.jar ext.odex dexopt-wrapper framework.jar frame ...
- 小白第一次使用Git随笔
想研究Git很久了,一直没有找到很好的博客或论坛,近几天工作项目任务没有那么重,就想着找几篇文章把这玩意儿给解决掉,本博客是记录读廖雪峰老师所写的<Git教程>的随笔,以便巩固学习,若想学 ...
- TopJUI | easyui HTML Dialog页面间GET方式数据传递
较容易的方式通过URL内带参数进行数据传递 var url = "apddList.html?c0=" + row.uuid + "&c1=" + ro ...
- Mysql(压缩包)下载与安装
第一步:百度搜索 MySQL 点击官网进入 或者复制链接进入下载页面:https://downloads.mysql.com/archives/community/ 第二步:选择自己需要的 ...
- # 2017-2018-1 20155224 加分项-实现mypwd
2017-2018-1 20155224 加分项-实现mypwd 1. 学习pwd命令 pwd命令以绝对路径的方式显示用户当前工作目录.命令将当前目录的全路径名称(从根目录)写入标准输出.全部目录使用 ...
- vue组件引入失败原因之一
引入组件的时候,路径问题 引入当前文件夹的另外一个文件:import ZiZuJianOne from 'ZiZuJianOne.vue',提示: 加上:“./”让把路径变成:import ZiZuJ ...
- EDB*Plus的当前路径问题
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页 [作者 高健@博客园 luckyjackg ...
- 洛谷 P1896 [SCOI2005]互不侵犯
洛谷 P1896 [SCOI2005]互不侵犯 题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8 ...
- 洛咕 P3306 [SDOI2013]随机数生成器
洛咕 P3306 [SDOI2013]随机数生成器 大力推式子??? \(X_{i}=\underbrace{a(a(\cdots(a(a}_{i-1个a}X_1+b)))\cdots)\) \(=b ...