同构 javascript 应用开发的最佳实践（2）

那些公司在使用同构 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 应用开发的最佳实践（1）

参考 《同构 Javascript 应用开发》