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”
❷ 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"));
});
❸ 如何用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编译之后能还原吗
用es6写得的代码可以转换成es5,但是新增的有些语法是没法转换的，比如promise,async,await
❺ 怎么用webpack和babel编译es6
首先无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器)。 于是需要通过webpack在配合各种plugin、loader将其转义，使之可以运行在浏览器里。
❻ 如何使用 ES6 编写一个 React 模块，并且编译后发布到 NPM
前言
如果你在使用 React， 那么肯定已经撸了好多自己的组件， 并尝试着共享出来。在 OneAPM 前端开发过程中， 我们也曾遇到了一些组件共享的问题：
例如:
是通过 git 直接发布还是通过 NPM 发布 ？
发布的是 ES5 的代码还是 ES6 的代码 ？
如何解决 Babel5 和 Babel6 的冲突 ？
这篇文章会通过编写一个叫做 MyComponet 的例子来演示发布一个模块需要注意的地方, 并不涉及单元测试和代码规范等。
前端开发果真是发展迅猛，刚享受到由模块化，组件化和单元测试带来的种种好处，又得迅速拥抱 Grunt, Gulp, Browserify， Webpack 这类自动化工具的变革。除了工具和生态圈，JavaScript 本身也在飞速发展着。ES2015(ES6) ，ES2016(ES7) ... 照这样的节奏，几乎是一年一个标准。标准多了，为解决兼容性的问题，竟也派生出了 源代码 和 编译 的概念。前端开发者通过语法糖、转化器、Polyfill 等，可以享受到标准乃至尚未定稿草案里的规范的便利，大幅提升开发效率。
至于这个模块本身,它的功能特别简单, 就是显示模块自身的的属性。
源代码
我们来编写组件 MyComponent.jsx ，放到项目的 src 目录下。
import React from 'react';
const MyComponent = props=> {
return <div>
props:
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
}
export default MyComponent;
关于各种文件放在哪里, 这里是我推荐的一些约定:
src 下用于存放源代码
lib 是编译后的代码，这个目录只读
所有包含 ES6 语法的文件名统一后缀为 .es6
所有包含 JSX 语法的文件后统一缀名为 .jsx
假设源代码里还有另外两个文件 foo.es6 和 bar.js，简化起见都丢到 src 的根目录下。
编译
为了把 ES6 代码编译成 ES5，需要安装 Babel，这个工具可以说野心极大，一次编译可以让 JavaScript 运行在所有地方。（听起来是不是有点 Java 的作风）
目前最常用的是 Babel5 版本，但是 Babel6 版本的设计更为精巧，已经非常推荐更新。也正是由于 Babel 有两个版本，所以开发过程中很有可能遇到这样的情况，
模块 A 的开发依赖于 Babel5 版本，而模块 B 依赖于 Babel6 版本。
解决这个问题最好的做法就是把 A 和 B 拆开，独立开发和发布。并且在发布到 NPM 的时候发布是的编译后的，也就是 ES5 版本的代码。
所以如果你的机器上的 babel 是全局安装的，是时候卸载它了，因为它的版本不是 5 就是 6 ，会导致一些不可预见的问题。
npm uninstall babel-cli --global
正确的安装方式是把 babel-cli 作为 develeopment 的依赖
npm install babel-cli --save-dev
使用的时候并不是直接调用全局的 Babel 而是调用依赖里的 Babel 可执行文件
./node_moles/.bin/babel
如果按照前文的约定来组织代码，src 目录结构看起来是这样的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx
模块所有的代码都在一个目录下，这样编译过程就简单多了，两条命令就可以完成
./node_moles/.bin/rimraf lib
./node_moles/.bin/babel src ---files --source-maps --extensions .es6,.es,.jsx --out-dir lib
输出目录的结构
lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map
具体解释一下各个命令的作用：
第一条命令 ./node_moles/.bin/rimraf lib
作用 编译前清空之前的 lib 目录，这是一个好习惯，可以杜绝对 lib 下的文件的任何手动更改。
第二条命令
./node_moles/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx ---files
作用 遍历 src 目录下的文件，如果后缀名是 .es/.es6/.jsx 中的一种，就编译成 ES5，否则就直接拷贝到输出目录 lib 下
参数详解:
--out-dir lib 指定输出目录为 lib
--extensions .es6,.es,.jsx 指定需要编译的文件类型
---files 对于不需要编译的文件直接拷贝
--source-maps 生成 souce-map 文件
编译过程中还隐含了一个步骤就是加载 .babelrc 文件里的配置，该文件内容如下
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
这是因为 Babel6 采用了插件化的设计，做到了灵活配置：如果要转换 JSX 语法文件，就加上 react 的 preset，同时项目依赖里要添加
babel-preset-react
npm install babel-preset-react --save-dev
样例代码
开发和调试 React 模块目前最好用的打包工具还是 Webpack，在项目跟目录下，新建一个 example 目录：
example/index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body></body>
<script src="bundle.js"></script>
</html>
example/src/index.jsx
import React from 'react';
import MyComponent,{foo,bar} from '../../';
import {render} from 'react-dom';
var element = document.createElement("div");
document.body.appendChild(element);
render(<MyComponent name="myComponent"/>, element);
webpack.config.js
var path = require('path');
mole.exports = {
entry: path.join(__dirname, 'example', 'src', 'index.jsx'),
output: {
filename: 'bundle.js'
},
mole: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
include: [
path.join(__dirname, 'example')
]
}]
},
devServer: {
contentBase: path.join(__dirname, 'example')
}
}
运行样例代码
./node_moles/.bin/webpack-dev-server
发布
发布前，还有一件事就是为你的模块添加一个入口文件 index.js
mole.exports = require('./lib/MyComponent');
exports.default = require('./lib/MyComponent');
exports.bar = require('./lib/bar');
exports.foo = require('./lib/foo');
接下来就是发布到 NPM 了。
npm publish
使用
别的开发者在使用你新发布的模块的时候可以这样导入
import MyComponent,{foo,bat} from 'react-component-example'
导入的直接是 ES5 代码，跳过编译从而避免了出现 Babel 版本不一致的问题，并且速度更快，是不是很棒！
不过假设你的模块包含很多组件，开发者可能只想用其中的一个或某几个，这时可以这样导入：
import MyComponent from 'react-component-example/src/MyComponent.jsx'
导入的是 ES6 代码，并且会被加入父级项目的编译过程。
❼ 如何使用webpack 构建es6的编译环境
如何使用webpac的jquery代码转换成js代码，然后让浏览器运行。就象php代码或者jsp代码
❽ 怎么在webstorm上利用babel实现自动编译es6文件
现阶段，建议你直接考虑用gulp，利用gulp-babel转es6。 毕竟一个团队中不是每个人都是用的webstrom，还有毕竟后续es6不是你的唯一需求，比如你还需要webpack
现阶段版本中转es5后在IE8下还是有很多坑需要填，甚至有bug依然很难用常规手段解决，所以如果你们需要支持IE8不是很建议在实际项目中用babel。
❾ 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