gulp的ES6轉換報錯 Cannot find module 'babel-core'
解決方案:按照以下的步驟進行安裝gulp-babel
一、安裝全域性的gulp及一系列工具包
電腦終端執行命令:
1. npm install -g gulp
2. npm install gulp --save-dev;
3. npm install gulp-babel --save-dev;
// babel-preset-env外掛,該外掛可以根據配置的目標執行環境自動啟用需要的babel外掛(動態轉化es6程式碼為可執行的es5的程式碼)
4. npm install babel-preset-env --save-dev;
5. npm install babel-core --save-dev;(根本問題,根據babel指引不需要這個,但是實際少了會報錯,加上就沒事了)
二、檔案的配置及轉碼過程
1. 新建專案,在專案的根目錄下建立一個檔名為“.babelrc”的配置檔案
輸入程式碼:{
"presets":["es2015"]
}
2. 在專案的根目錄下再建立一個名為".gulpfile.js"檔案,在檔案內輸入轉碼配置:
//引入gulp
var gulp = require("gulp");
//引入gulp-babel
var babel = require("gulp-babel");
//設定gulp命令
gulp.task("default",function(){
//需要轉碼的es6檔案,code資料夾下的任何一個字尾名為.js的檔案,code資料夾需要手動建立
return gulp.src("code/*.js")
//啟用babel
.pipe(babel())
//經過轉碼的es5檔案存放的位置,只需要將dist資料夾手動建立在專案的目錄中,這個路徑可以更改,經過轉碼
的ES5檔案會自動根據code下的js檔案的名稱生成
.pipe(gulp.dest("dist"));
});
3. 新建一個JS檔案,輸入es6程式碼
eg: let a = 1;
var fn = () =>{
console.log("a");
};
fn();
4. 執行終端命令,右鍵點選當前的資料夾選擇 -> 新建位於資料夾位置的終端視窗;
5. 在終端輸入gulp命令
gulp default
6. 命令執行成功後,再次開啟編輯器,在dist資料夾下自動生成一個你剛才命名的資料夾的js檔案,這個檔案就是你code資料夾
中的es6語法轉發的es5檔案。