layout | title | date | description | tag |
---|---|---|---|---|
post |
react16全家桶脚手架子 |
2017-12-11 |
react16+redux+react-router4 |
React |
https://github.com/iceyangcc/react-ant-design-dllplugin-startkit
这个项目是 一个react16 SPA单页项目的模板, 可以让你快速上手写 react全家桶相关项目而不太关心配置, 打包也进行了优化; 还在不断优化中; 支持 打包后生成Java项目需要的 ${ctx}字符串变量, 也支持本地express服务器查看 打包后的文件 甚至给你写了一点示例代码,效果如下:
ES5/6/7 + react16 + react-router4 + redux + axios + less/sass/stylus + antd@3 + decorator + express本地服务器
webpack@3.x + happypack + dllplugin + CommonsChunkPlugin + GLoabal变量
推荐首先安装 yarn (sudo npm i -g yarn), 安装软件更快速
- 1.安装依赖环境 webpack@3.x, node@8.x
- 2.克隆代码仓库 https://github.com/iceyangcc/react-ant-design-dllplugin-startkit
- 3.sudo npm install / sudo yarn 安装依赖
npm run vendor
npm start 开启前端代码
npm run dev
npm run prod
如果需要的代码不是这样的格式, 可以修改: config/scripts/build.js:98
中的相关内容, 该代码只是替换生成后index.html和css代码中的图片路径
npm run server PS: public/index.html中的js脚本, 声明 Ajax请求的 路径前缀, 你可以根据需要配置这个代码, 原因是: 本地的 Java项目在调试时需要加项目路径,例如: localhost:8080/projectName/restapi/list 而上线时使用的是 xxx.com/restapi/list, 所以 npm run dev 打包是针对第一种的, npm run prod 是针对上线代码的.
如有任何疑问和建议, 请联系我 iceyangcc@163.com, 谢谢