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

前端之家收集整理的这篇文章主要介绍了vue,angular4,react如何搭建完美的工程项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue,angular4,react 之webpack搭建

前端三大框架基础项目

  • webpack3 + typescript+react

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

  • 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. 同时支持ejspug 作为 htmlWebpackPlugin 模板

3. 同时支持 stylusless 编写样式

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

TODO

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

欢迎大家提意见!

原文链接:https://www.f2er.com/angularjs/146176.html

猜你在找的Angularjs相关文章