webpack+angular的項目SEED
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測試例子。