同構 javascript 應用開發的最佳實踐（2）
摘要：
那些公司在使用同構 javascript, Yahoo、 Facebook、Netfix 和 Airbnb 這些都接受了同構 javascript。不過同構成本還是很高的，存在一定複雜度。如果對效能要求不高，也無需支援 SEO 需求，可以選擇使用 SPA 。同構 javascript 帶來...
那些公司在使用同構 javascript, Yahoo、 Facebook、Netfix 和 Airbnb 這些都接受了同構 javascript。不過同構成本還是很高的，存在一定複雜度。如果對效能要求不高，也無需支援 SEO 需求，可以選擇使用 SPA 。同構 javascript 帶來的麻煩似乎要大於收益。
同構的本質就是程式碼複用。
整個專案管理使用 gulp 工具進行管理，由於在服務端使用 nodejs 對模組管理使用 CommonJS。而在瀏覽器端不是天生支援 CommonJS 模組管理在 es6 中引入更優雅的模組管理。但是在 nodejs 我知道階段可能還不支援 ES6 的模組管理，所以使用 babel 這個編譯工具對我們服務端的 javascript 程式碼進行轉換為 commonJS 模組管理。
這裡有時候不會關於詳細演示如何使用某個具體的庫或框架，例如如何使用 gulp 來構建 javascript 的專案。更多的是關注整體框架是如何搭建的。
定義開發流程
引入構建工具 gulp
var gulp = require('gulp');
gulp.task('default',function(){
console.log('default task sucess');
})
編譯編譯任務
引入 babel 和 gulp-babel 的，並且需要 npm 對所需的庫進行已安裝，除此而外還需要全域性安裝 gulp 和 babel-cli。編寫編譯任務來對服務端 js 使用 babel 編譯工具進行編譯。
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('compile',function(){
return gulp.src('src/**/*.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
監聽程式碼變化
gulp.task('watch',()=>{
gulp.watch('src/**/*.js',['watch'])
})
gulp.task('default',['watch','compile']);
服務端程式碼更新後重啟服務
const nodemon = require('gulp-nodemon');
const sequence = require('run-sequence');
我們需要監控編譯好的 index.js ，當這個檔案內容發生了變化就需要自動重啟服務。
gulp.task('start',()=>{
nodemon({
watch:'dist',
script:'dist/index.js',
ext:'js',
env:{'NODE_ENV':'development'}
});
});
觀察的檔案是編譯好的檔案所以我們需要按一定執行順序來執行一系列的任務。
gulp.task('default',(cb) =>{
sequence(['watch','compile'],'start',cb);
});
好就是我們應用構建已經完成
參考 《同構 Javascript 應用開發》