webpack+angular的項目SEED(上)

介紹

首先項目要先決定框架，組件化的前端是一個趨勢方向，只是組件化的前端項目開發須要一個從發佈到測試的流程化管理，因此決定本身開始構建一個webpack+angular的項目SEED。方便之後本身的項目構建和開發。

文件結構

決定了組件化開發就第一個須要決定的就是項目的目錄結構

.
├── app   //項目源文件夾
│   ├── page        //頁面文件夾
│   ├── widgets     //組件文件夾
│   ├── index.html  //項目入口頁
│   ├── app.Sper.js //項目入口JS測試文件
│   └── app.js      //項目入口JS文件
└── bin   //項目打包文件夾
└── E2E   //E2E測試文件夾
└── gulp  //gulp任務文件夾
│   ├── config.js
│   └── task        //GULP任務文件夾
└── node_modules    //nodejs的LIB

GULP任務

決定了項目文件結構之後就要開始考慮須要GULP作那些任務了，第一個即是寫gulp的一些配置方便本身之後維護。

config.js

var VERSION = require('../package.json').version;
var serve = require('browser-sync');
var path = require('path');
var root = 'app';    
function resolveToApp(files) {
    return path.join(root, files);
}
module.exports = {
    banner: '/*!\n'
    +' * zchq88_seed\n'
    +' * @license MIT\n'
    +' * v' + VERSION + '\n'
    +' */\n',
    output: 'bin',
    entry: 'app/app.js',
    root: root,
    paths: {
        js: resolveToApp('/**/*!(.spec.js).js'),
        html: resolveToApp('**/*.html'),            
        styl: resolveToApp('**/*.styl')
    },
    serve: serve
};

而後須要作的就是WEBPACK打包，HTML模板的複製到BIN，清理BIN文件夾，WATCH熱調試代碼這些任務。
在這些GULP任務中最主要的就是WATCH這個任務了，它關係到實時編譯調試代碼。

watch.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var config = require('../config');// gulp公共配置
var path = require('path');

exports.task = function () {
    config.serve({
        port: process.env.PORT || 3000,
        open: false,
        server: {baseDir: config.output}
    });
    gutil.log(gutil.colors.red('server啓動'));
    var reload = function () {
        return config.serve.reload();
    };
    var webpackPaths = [].concat([config.paths.js], [config.paths.styl]);
    gulp.watch(config.paths.html, ['html',reload]);
    gulp.watch(webpackPaths, ['webpack']);
    gulp.watch(path.join(config.output, '**/*.js'), reload);
};

這裏就不得不說browser-sync這個工具了。這個工具直接提升的代碼的開發效率。我再這裏使用的只是他的熱調試功能。實時的WATCH和刷新頁面，這裏就有一個小坑，就是GULP的TASK串行並行問題，形成JS文件修改webpack尚未編譯生成完成就執行了reload，形成JS文件修改不能實時反應到瀏覽器上。因此我把監視APP的js，修改爲監視輸出目錄的JS來刷新頁面，這樣就能夠等webpack任務完成後再刷新頁面了。

webpack配置

由於在這個項目中想使用了angularjs和ES6因此須要nodejs安裝ng-annotate-loader和babel-loader來加載JS和編譯JS文件。（ES6的使用只是測試性的，由於實際項目中ES6的代碼調試困難。瀏覽器調試通常都是編譯後的文件。因此還須要本身定位源代碼的錯誤位置，雖然有sourcemap之類的能夠解決代碼定位問題，可是斷點調試什麼的也會比較麻煩。）CSS我選擇Stylus。其實用CSS的預處理框架看習慣。我我的由於CSS多數使用的是Bootstrap裏面的，因此對CSS改動比較少無所謂用什麼。大家能夠根據本身的習慣修改。

webpack.config.js

module.exports = {
    devtool: 'false',
    entry: './app/app.js',
    output: {
        filename: 'app.js'
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel'},
            {test: /\.html$/, loader: 'raw'},
            {test: /\.styl$/, loader: 'style!css!stylus'},
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
};

webpack也帶來一個問題就是文件打包問題，打包成一個文件的時候記得分離ANGULAR等框架文件，畢竟這些文件都有CDN。打包進WEBPACK裏面的話會照成很大的一個文件須要下載。動態打包方面的資料能夠去WEBPACK 官方文檔裏面看，不過好像如今尚未對ES6的支持。ES6的使用不少時候只能說問道前端開發，對於公司項目的使用仍是要多多的考量的，也許還須要等等瀏覽器的支持，更多好工具的配合。不過ES6的的使用應該是一個趨勢。

下篇內容

以上主要是項目生產方面的一些內容，固然還有項目須要有項目測試方面的內容纔可以比較好的維護和開發項目。這方面的內容會在之後在寫本身的心得。

有興趣的能夠去zchq88_seed這個項目看看，裏面已經含有KARMA的單元測試和protractor的E2E測試例子。

webpack+angular的項目SEED(下)