公司突然組織需要重新搭建一個基於 的論壇系統，前端採用 ，上網找了一些腳手架，或多或少不能滿足自己的需求，最終在基於 的`react`腳手架 "generator react webpack" 上搭建改造，這裡作為記錄。 代碼在這裡： "github" 另外推薦地址： "react starter ...
公司突然組織需要重新搭建一個基於node的論壇系統，前端採用react，上網找了一些腳手架，或多或少不能滿足自己的需求，最終在基於YeoMan的react腳手架generator-react-webpack上搭建改造，這裡作為記錄。
代碼在這裡：github
另外推薦地址：react-starter-kit
簡單文件夾結構
├── README.md # 項目README文件
├── conf # 配置文件夾
│ └── webpack # webpack配置(下麵包括開發、生產、測試環境的配置)
├── karma.conf.js # karma測試配置文件
├── node_modules # 包文件夾
├── package.json # 包描述文件
├── src # 源文件夾
│ ├── actions # redux actions文件夾
│ ├── client.js # 客戶端啟動文件
│ ├── components # 項目組件(下麵分為業務組件和公共組件)
│ ├── config # 環境配置文件夾(指明當前環境)
│ ├── containers # 入口容器
│ ├── exports.js # 常用組件的exports文件,可以忽略
│ ├── images # 圖片
│ ├── index-release.html # 生產環境模板文件
│ ├── index.html # 開發環境入口html
│ ├── reducers # redux reducers文件夾
│ ├── routes # 路由配置
│ ├── sources # 資源文件(可忽略)
│ ├── static # 靜態文件(可以存放第三方庫)
│ ├── stores # redux stores文件夾
│ ├── styles # 全局樣式文件夾
│ └── views # 視圖文件夾
├── test # 測試文件夾
│ ├── actions # 測試actions
│ ├── components # 測試組件
│ ├── config # 測試配置(檢測環境)
│ ├── loadtests.js # 載入測試文件
│ ├── reducers # 測試reducers
│ ├── sources # 測試資源(flux datasource)
│ └── stores # 測試stores
└── webpack.config.js # webpack配置入口文件整體應用技術
- react
- redux
- react-router(4.0.0^,可以換成2x或者3x)
- eslint
- karma + mocha
- immutable(可選)
在原始腳手架上新增
- 路由(react-router)
- 調試工具(react devTools)
- 增加文件分類(images/fonts/media)
- 生產配置增加文件hash,公共庫拆分
改造過程
拆分生產環境公共庫，生成文件hash
this.config = {
cache: false,
devtool: 'source-map',
entry: {
main: ['./client.js'],
vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom',
'react-router-redux', 'react-css-modules', 'history']
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new HtmlWebpackPlugin({
filename: path.resolve('./dist/index.html'),
template: path.resolve('./src/index-release.html'),
inject: 'body'
})
]
};
this.config.output.filename = '[name].[chunkhash].js';主要在entry上做了文章，將公共庫分離成vendor，同時配合CommonsChunkPlugin進行代碼抽離。最後將output的文件名加上chunkhash`，這樣在新打包的文件不會被瀏覽器緩存策略而緩存
基本配置文件區分靜態文件目錄
{
test: /\.(png|jpg|gif|ico|swf|xap)$/,
loaders: [
{
loader: 'file-loader',
query: {
name: 'images/[name].[ext]'
}
}
]
}主要使用query配置，區分不同文件目錄。fonts/media相同道理配置即可
組件區分
├── bussiness
│ └── README.md
└── common
├── README.md
├── Template.js
├── YeomanImage.js
└── button主要區分業務組件和公共組件。當然你也可以不區分，引用常用的公共庫如螞蟻金服的react前端庫，進行改造。如果你需要自己寫組件的話，個人愚見還是區分一下。
加入immutable
加入這個看個人意願，加入之後必定會造成一定的學習以及開發成本，但是對redux來說，運用這個庫是再好不過的了，具體表現在數據的不可變性，即每次的數據都會是一個新的，不會在原始引用的數據上進行重新操作，以免造成數據污染。
// reducers/items.js
const initialState = fromJS({
items: [
{
"forum_name": "武漢大學",
"user_level": 12,
"user_exp": 5301,
"id": 30996,
"is_like": 1,
"favo_type": 2
},
// ...
]
});
function reducer(state = initialState, action) {
switch (action.type) {
case GET_ITEMS:
return state;
default:
return state;
}
}
// views/Home.js
render() {
const list = items.get('items');
// ...
{
list.map((l, index) => {
return (
<tr key={ `list${index}` }>
<td>{ l.get('forum_name') }</td>
<td>{ l.get('user_level') }</td>
<td>{ l.get('user_exp') }</td>
<td>{ l.get('is_like') === 0 ? '是' : '否' }</td>
<td>{ l.get('favo_type') }</td>
</tr>
);
})
}
}如果不清楚immutable，可以自行百度、谷歌。
使用路由，拆分views文件夾
加入react-router，腳手架中是沒有生成路由的(可能有吧，只是樓主沒有找到
