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