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语法,但是当 ...
随机推荐
- java集合---迭代器iterator
一:ArraryList 最终继承超级接口Collection,Colection接口继承Iterator接口. public interface Collection<E> exten ...
- 拼多多java后台笔试题目总结(20180830)
1.回合攻击问题 package com.hone.pdd; import java.util.Scanner; /** * 题目:模拟一个游戏场景,两种伤害,一种正常伤害,一种是先蓄力(也算一个回合 ...
- OO第一次总结作业
第一次OO博客作业 前言 面向对象课程已经经过了4周的时间.前三次作业全部是关于多项式求导的相关内容,内容由易到难,同时我也开始逐渐深入感受学习面向对象的各项特征,逐渐将自己的编程风格从C向真正的面向 ...
- #leetcode刷题之路44-通配符匹配
给定一个字符串 (s) 和一个字符模式 (p) ,实现一个支持 '?' 和 '*' 的通配符匹配.'?' 可以匹配任何单个字符.'*' 可以匹配任意字符串(包括空字符串).两个字符串完全匹配才算匹配成 ...
- Nginx服务器的平滑启动、平缓停止、平滑升级
注:Nginx服务在运行时,会保持一个主进程(master process)和一个或多个工作进程(worker process). 每一个进程都会有一个PID进程号,可以通过向主进程的PID进程号发送 ...
- 菜鸟成长心酸史之php初遇教程
phpstorm是我接触到的第二个制作网页的程序,刚拿到php的时候,我是懵逼的,从安装到使用,可以说一点都不会,尤其是它还要配合wampsever使用,即使看视频,不同的制作php的软件也有不同的地 ...
- 2017-2018-1 20155226 《信息安全系统设计基础》课下实践——实现mypwd
2017-2018-1 20155226 <信息安全系统设计基础>课下实践--实现mypwd 1 学习pwd命令 输入pwd命令 发现他是给出当前文件夹的绝对路径. 于是 man 1 pw ...
- 20155327实验一 Java开发环境的熟悉
20155327实验一 Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的java程序 2.使用IDEA编辑.编译.运行.调试java程序 实验步骤 1.使用JDK编译.运行简单的jav ...
- 2017-2018-1 20155338 加分项目——PWD的实现
2017-2018-1 20155338 加分项目--PWD的实现 项目要求 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试 ...
- 20145209刘一阳《JAVA程序设计》第六周课堂测试
第六周课堂测试 1.现有以下代码,哪些选项插入到第5行可以通过编译?(BDF) 1.import java.util.*; 2. 3.Class FindStuff { 4.public static ...