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