es6babel无法编译

Ⅰ 为什么我使用gulp-babel不能将es6编译成es5

习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～ 一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码 我是这么配置的..就先新建一个Empty Project，然后在src目录下新建了一个main.js； // 这一...

Ⅱ 如何用babel来编译ES6的代码

习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～
一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码
我是这么配置的..就先新建一个Empty Project，然后在src目录下新建了一个main.js；
// 这一步不是必须的 只是刚上手的话 从空项目开始自己配置会少很多干扰
Then..进入设置，把JavaScript language version改成ECMAScript 6；
再Then..写一段ES6代码
'use strict';
// node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错
// 这是没有严格模式时候的错误提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);
现在IDE会出现一个File watcher提示条
先别点Add watcher！我们要先去装babel～
首先在根目录新建一个package.json
{
"name": "test-project",
"version": "1.0.0"
}
然后打开IDE的Terminal，安装babel-cli
npm install --save-dev babel-cli
Good! 现在可以去点Add watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了
下面第三行，Program那一项，填
$ProjectFileDir$/node_moles/.bin/babel
然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦
但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）
所以我们需要安装Babel的preset以正确识别ES6代码；
和刚才一样，在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015
在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上
{
"presets": [
"es2015"
]
}
OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～
注意：想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持，需要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体可以参考Node.js官网对ES6的说明：ECMAScript 2015 (ES6)。

Ⅲ 移动端使用es6语法需要编译吗

然而, Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:
babel只是个翻译，假设a.js 里 import 了 b.js, 对a.js进行转码，只是翻译了a.js，并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里，包含 a.js，b.js 的代码，那就需要用到打包工具
所以我在这里讲解一下如何使用webpack工具将带有import和export语法的JS文件, 通过打包工具生成所有浏览器都支持的单个JS文件.
1. 下载node.js和webpack
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。可以说就是服务器端的JS. webpack是一个打包工具, 而它是依赖于node.js运行的.
下载node.js可以通过官网:
具体的安装步骤网上可以搜到很多, 这里不再赘述. 安装完毕后打开node.js自带的命令行工具
这里写图片描述
然后输入如下命令全局安装webpack工具
npm install -g webpack
接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中
npm install webpack
2. 编写webpack.config.js文件
在根目录下创建webpack.config.js, 这个文件是用来描述一些要使用webpack工具进行打包的配置信息, 文件内容如下:
这里写图片描述
通过该文件可以使用webpack打包工具, webpack会从import.js进入, 对该文件中的内容进行编译并打包, 最终会在dist目录下生成打包好的文件bundle.js, 编译打包过程中用到的工具在mole对象的loaders中声明, 这里使用了babel-loader来对JS文件进行编译(包括从ES6转换为ES5以及打包)
3. 创建import.js
创建一个import.js, 内容如下:
这里写图片描述
在该文件中通过ES6语法import从export.js中引入firstName和lastName变量. 并且通过console.log将引入的两个变量打印到控制台.
4. 创建export.js
这里写图片描述
在该文件中通过ES6语法export将文件中的几个变量作为模块输出给别的文件引用.
5. 创建HTML文件
在HTML文件中直接将webpack最终打包生成的bundle.js文件引入即可, 因为通过webpack工具已经将export.js和import.js的所有内容都打包到一个文件bundle.js中了, 因此在HTML文件中引入该文件即可以将两个JS文件中的代码都执行.
这里写图片描述
6. 配置.babelrc文件
在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下:
这里写图片描述
7. 下载相关依赖模块
方式1: 可以像下面这样, 直接在项目根目录下创建一个package.json文件, 并且在文件中指定devDependencies对象, 在该对象中写上我编译及打包中所要使用到的依赖模块, 图片中的webpack就是用于打包的工具, 而其他的以babel开头的选项都是编译JS文件并打包所需要用到的依赖模块.
这里写图片描述
创建好package.json文件后, 在命令行中输入
npm install
npm工具就会根据该文件中devDependencies选项下载对应的依赖模块.
方式2(推荐): Ctrl+R打开运行, 然后输入cmd打开命令行工具, 通过命令行工具一个个安装, 这样可以直接通过npm去下载依赖模块最新的稳定的版本, 同时也不需要自己去记这些模块的版本号
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到项目的根目录下, 然后输入如下指令
webpack
等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件

然后在浏览器上运行html文件, 使用F12打开开发者工具, 就可以看到console选项中输出两行记录”Micheal”, “Jackson”

Ⅳ react, es6 + nodejs 怎么用 babel 编译

需要使用npm按照以下依赖包：
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0",
"object-assign": "^4.1.0",
"react": "^15.2.1",
"react-dom": "^15.0.2",

Ⅳ 怎么用webpack和babel编译es6

首先无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器)。 于是需要通过webpack在配合各种plugin、loader将其转义，使之可以运行在浏览器里。

Ⅵ 如何使用babel进行es6文件的编译

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var courses = { name: 'english', score: 90 };
courses = _extends({}, courses, { comment: 'A' });
console.log(courses);

Ⅶ 为什么我使用gulp-babel不能将es6编译成es5

需要安装babel-preset-es2015插件，才能把es6编译成es5
npm install --save-dev babel-preset-es2015

在gulpfile.js中增加presets
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});

Ⅷ gulp babel安装成功了为什么不能将es6编译成es5

按babel官方教程来配置的：

gulpfile.js

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

app.js

'use strict';let a = 'hello world';

还需要安装babel-preset-es2015插件，才能把es6编译成es5

npm install --save-devbabel-preset-es2015

在gulpfile.js中增加presets

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel({ presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});