前言
因為有點不知道除了 visual studio 之外的開發環境會長怎樣，所以研究了一下以下的文章，稍微了解一下現在的世界長怎樣了。 http://larry850806.github.io/2016/09/04/es7-environment/
我這篇算是心得報告，只有把我不會的地方加一些描述。要了解全部還請記得去原來的地方看。記得一定要感謝原作者 Larry Lu http://larry850806.github.io/about/
https://github.com/Larry850806/nodejs-ES7-template
了解生字
目錄安排
文章中的建議是因為有用了 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 的東西跑出來。
