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，完成。