es6编译

㈠ 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"));
});

㈡ 如何使用webpack 构建es6的编译环境

如何使用webpac的jquery代码转换成js代码，然后让浏览器运行。就象php代码或者jsp代码

㈢ 移动端使用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”

㈣ 怎么在webstorm上利用babel实现自动编译es6文件

现阶段，建议你直接考虑用gulp，利用gulp-babel转es6。 毕竟一个团队中不是每个人都是用的webstrom，还有毕竟后续es6不是你的唯一需求，比如你还需要webpack
现阶段版本中转es5后在IE8下还是有很多坑需要填，甚至有bug依然很难用常规手段解决，所以如果你们需要支持IE8不是很建议在实际项目中用babel。

㈤ 为什么我使用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"));
});

㈥ webpack 怎么编译es6

说得通俗点，就相当一个编译器，把你写的jquery代码转换成js代码，然后让浏览器运行。就象php代码或者jsp代码，浏览器直接运行不了，得通过编译器来解析，生成纯html代码让浏览器运行。所以如果不引用就用不了jquery代码

㈦ gulp 怎么编译页面中的es6

gulp在3.9版本里面增加了对babel的支持，因此我们可以直接在gulpfile里面使用ES6(ES2015)了。

升级gulp版本

首先要检测一下我们的gulp版本，确保CLI版本及Local版本都在3.9之上:
gulp -v

版本如下：
CLI version 3.9.0
Local version 3.9.0

若版本过低，我们可以通过以下方式进行升级，这里将同时升级CLI版本和Local版本：
npm install gulp -g && npm install gulp --save-dev

安装babel

我们需要安装babel-core及babel-preset-es2015来转换ES6代码：
npm install babel-core babel-preset-es2015 --save-dev

然后，创建一个.babelrc文件来使用es2015 preset：
touch .babelrc

写入如下内容：
{
"presets": ["es2015"]
}

接下来就是使用ES6语法重写gulpfile了。

使用ES6语法重写gulpfile

首先，重命名gulpfile.js为gulpfile.babel.js，这样gulp执行前会自动调用babel转换文件。
mv gulpfile.js gulpfile.babel.js

然后在gulpfile.babel.js里面用ES6语法写些内容，如下：
'use strict';

import gulp from 'gulp';
import less from 'gulp-less';

const paths = {
less: 'less/',
dest: 'build/'
};

gulp.task('less', () => {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
});

然后执行gulp命令：
gulp less

这里和原来一样，以前的命令怎么用现在还是怎么用!

GitHub源码：using-es6-with-gulp

㈧ 如何将es5的代码转换为es6

在这里需要的环境就是node，可以去查一下安装教程，这里就不赘述了。当然需要我们的主角--webpack，很强大的一个工具。
安装webpack：（cmd命令窗口，也可以用git）
a.安装webpack到全局 npm install webpack -g  
b.然后安装webpack到你的项目中（要切盘到你的目录下）  npm install webpack --save-dev
c.webpack中常用命令webpack --watch 只要改变了jsx内容，直接将改变的内容重新编译打包,运行久了以后会自动终止
安装完成后需要下面的插件（切盘到你的项目下）：
1.npm install babel-core --save-dev
2.npm install babel-loader  --save-dev 下载加载器
3.npm install babel-preset-es2015 --save-dev
逐步下载上述插件，完成之后创建一个webpack.config.js文件放在你的项目目录下，在里面写配置文件，代码如下：
mole.exports={
//文件入口
entry: {
main: './es6/main.js',
common: './es6/common.js'
},
//文件出口
output:{
path:'./js',
filename:'[name].bundle.js'
},
//引入模块。babel-loader转换
mole:{
loaders:[
{
test: /\.js$/,
exclude: /node_moles/,
loader: "babel-loader",
query:
{
presets: ['es2015'], //并不明白，这么写就对了，如果用react，就在这里写上['react']
//npm install babel-plugin-transform-runtime 然后引入 解决es6生成器函数带来的问题
}
}
]
}
}
ok，完成。