漲知識|Gulp + Babel實現es6向es5轉碼

歡迎點擊「算法與編程之美」↑關注我們！

本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。

問題描述

爲什麼需要對es6代碼進行轉碼？是因爲部分瀏覽器無法識別es6語法，在gulp中ugilfy也無法壓縮es6，如果有es6的代碼，就會壓縮失敗，所以要將es6轉化爲老一版的es5，才更加方便。

解決方案

1.安裝gulp和插件

  首先需要安裝gulp

//全局安裝gulp

npm  install -g gulp

//項目中安裝gulp

npm  install --save-dev gulp

然後安裝babel相關的插件

npm  install gulp-babel --save-dev

npm  install @babel/core@^7.0.0 --save-dev

npm  install babel-preset-env --save-dev

2.新建.babelrc文件

 在對應的項目目錄下新建.babelrc文件，裏面主要有兩個屬性presets和plugins，對應的內容如下：

{

       "presets": [    // 需要用到的套件    ],

       "plugins": [    // 需要用到的插件    ]

}

因爲這裏是es6向es5的轉碼，所以只指定presets就行了

{

  "presets": ["env"]

}

3.新建gulpfile.js文件

// 獲取 gulp

var gulp  = require('gulp');

// 獲取babel模塊

var babel  = require('gulp-babel');

gulp.task("babel",  function () {

  return gulp.src("./src/*.js")// es6  源碼存放的路徑

    .pipe(babel())  //執行轉碼

    .pipe(gulp.dest("dist")); //  轉換成 es5 存放的路徑

});

這樣就可以實現es6向es5轉碼了。

END

主  編   |   張禎悅

責  編   |   馮   博

 where2go 團隊

---

   

微信號：算法與編程之美          

長按識別二維碼關注我們!

溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！