1. 程式人生 > >gulp的ES6轉換報錯 Cannot find module 'babel-core'

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檔案。