vue,angular4,react如何搭建完美的工程项目

vue,angular4,react 之webpack搭建

前端三大框架基础项目

• webpack3 + typescript+react

https://github.com/githbq/hbq-typescript-react-boilerplate.git
支持typescript + react16 + react-router V3

• webpack3 + babel(es6+) + react

https://github.com/githbq/hbq-simple-webpack2-react.git

• webpack3 + typescript+vue2

https://github.com/githbq/hbq-typescript-vue-boilerplate.git

• webpack3 + typescript+angular4

https://github.com/githbq/hbq-angular-boilerplate.git

特色

1. 支持多入口页面自动生成

• 在 src/apps/ 目录下会建立 .ts 或者 react 下 .tsx 会自动生成 .html 文件
• 自定义html模板: src/apps 下建立与 tsx? 同名的 [name].html , [name].pug
• 优先使用自定义模板,不然使用dev-config/index.template.pug 做为 htmlWebpackPlugin 模板

2. 同时支持ejs 与 pug 做为 htmlWebpackPlugin 模板

3. 同时支持 stylus 与 less 编写样式

4. 自动构建目录在 dev-config 目录下,配置文件彻底解耦

├── dev-config
|  ├── configs
|  |  ├── alias.js
|  |  ├── constants.js
|  |  ├── devServer.js
|  |  ├── entry.js
|  |  ├── globalConfig.js
|  |  ├── plugins.html.js
|  |  ├── plugins.js
|  |  ├── proxy.js
|  |  ├── rules.css.js
|  |  ├── rules.js
|  |  └── utils.js
|  ├── index.template.html
|  ├── index.template.pug
|  ├── lite-server-config.js
|  ├── readme.md
|  ├── templateCompilers
|  |  └── pug.js
|  └── webpack.config.js

5. hmr(hot module replace) 代码修改热更新支持

安装

1. 直接 git clone 对应的git仓库地址

2. 采用 iclone-cli 脚手架

npm i -g iclone-cli 
// then 
iclone init -t  [模板名称] -n [工程名称]

环境要求

nodejs v8.4

win nodejs v8.4 百度云盘下载连接 http://pan.baidu.com/s/1bpD78YF
mac 系统直接使用 n latest获取最新版本便可

开发工具安利

VSCODE : 这真的很快很好用

win vscode 最新版 x64-1.16.0 百度云盘下载连接 http://pan.baidu.com/s/1bpB5FEf

本人其它模板项目

• koa2 + typescript + mongodb

https://github.com/githbq/hbq-koa2-base.git

• nodejs command line

https://github.com/githbq/hbq-module-cli-boilerplate.git

• gulp (css js less ts gzip)

https://github.com/githbq/hbq-gulp.git

TODO

• README.md 文档尚未写好,挨个写清楚
• 前端单元测试待加入
• 编写typescript 开发相关文档

欢迎你们提意见!