我這篇算是心得報告，只有把我不會的地方加一些描述。要了解全部還請記得去原來的地方看。記得一定要感謝原作者 Larry Lu http://larry850806.github.io/about/ 
https://github.com/Larry850806/nodejs-ES7-template

了解生字

• babel 
  它看來是一個編譯器，把你寫的 javascript 轉成另一種寫法的 javascript。這大概就是目前 javascript 最有趣的地方吧…。 https://babeljs.io/ 
  類似的有：TypeScript, CoffeeScript

• gulp 
  這個看起來像是 gcc make 的系統，依照你寫的設定標，自動把編譯、複製、散佈等工作做完的系統。是 node.js 的套件之一。 
  http://gulpjs.com/ http://abgne.tw/web/gulp/gulp-tuts-install-gulp-js.html

目錄安排

文章中的建議是因為有用了 gulp 做自動處理，所以會把檔案很乖地很分散在各個不同的目錄裡。

package.json
node_modules
gulpfile.js
index.js
src
    index.js
    utils.js
build
    index.js
    utils.js

package.json 與 node_modules 是 node.js 需要的。 
gulpfile.js 是 gulp 的設定 
最外面的 index.js 是程式執行的起點。但它只是轉一手讓 build/index.js 來執行。為了不要讓人太傷腦筋。 
src 裡，原文是放 ES7 的程式，build 是被轉成 ES5 的程式。

註：ES7 與 ES5 是指 ECMA Script 7 與 ECMA Script 5。是 Javasript 目前的正式學名。兩個在語法上有不同，所以必須要分兩個名字來講。目前可以靠程式把新語法轉成舊語法，以利舊瀏覽器/舊環境執行，減少大家開發上轉換的痛苦。這一點也是獨特之處。

開發流程

開發時只動 src 裡的東西，其他的動作靠 gulp 來幫忙。 
真正執行的起點是 ./index.js，而它會去執行 build/index.js。

gulp 設定

因為是靠 gulp 來處理轉譯與搬檔案，所以要了解一下它的用法。https://github.com/nimojs/gulp-book

文章內使用的設定是：

// gulpfile.js

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

gulp.task('babelify', function(){
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['es2015', 'es2016', 'es2017'],
            plugins: [
                [
                    "transform-runtime", {
                        "polyfill": false,
                        "regenerator": true
                    }
                ]
            ]
        }))
        .pipe(gulp.dest(build))
});

使用方法是在命令列輸入 gulp babelify，gulp 就會把 src 裡所有的 js 用 babel 轉成 ES5 的程式碼，丟到 build 裡去。所需要的模組是：

{
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-es2016": "^6.11.3",
    "babel-preset-es2017": "^6.14.0",
    "gulp-babel": "^6.1.2"
}

babel 轉譯錯誤的輸出

若是在 babel 轉譯的時候有錯誤，要把錯誤寫出來，需要在 .pipe(babel({…}) 後面加上 on error 的處理函式

.on('error', function(err){
    console.log(err.stack);
    this.emit('end');
})

debug 用的 source map

在轉譯之後，有 exception 發生時，會 dump 出來的是已轉譯的程式碼(也就是 build/index.js)，但是那個我們人類很難看，所以可借用所謂的 source map 來讓錯誤對應到 src/index.js 我們比較好修正。(本來設計也只能在 src 那裡動程式碼。)所以在 on(‘error’, … )的後面加上：

.pipe(sourcemaps.write({
            includeContent: false,
            sourceRoot: 'src'
}))

要讓 node 知道要採用 source map 來對應錯誤行號與內容，要在執行的 index.js 加上：

require('source-map-support').install();

要做到如此，source map 需要兩個模組：

{
    "gulp-sourcemaps": "^1.6.0",
    "source-map-support": "^0.4.2"
}

程式碼變動自動轉譯

這個功能原作者是用 gulp 來監視檔案有無變動，有的話就自動轉譯。要在 gulpfile.js 加上一段：

gulp.task('watch', function(){
    return gulp.watch(['src/**/*.js'], ['babelify']);
});

gulp.task('default', ['babelify', 'watch']);

最後

還可以多看一篇 http://larry850806.github.io/2016/07/25/react-optimization/ 這裡大概就可以知道為什麼 python 會有 mutable、immutable 的東西跑出來。

 

 

 

分享