React Ant Design Dllplugin Startkit
layout title date description tag
post
react16全家桶脚手架子
2017-12-11
react16+redux+react-router4
React

react16+ant-design(antd)+sass/less/stylus好用的脚手架工具来啦

项目地址:

https://github.com/iceyangcc/react-ant-design-dllplugin-startkit

这个项目是 一个react16 SPA单页项目的模板, 可以让你快速上手写 react全家桶相关项目而不太关心配置, 打包也进行了优化; 还在不断优化中; 支持 打包后生成Java项目需要的 ${ctx}字符串变量, 也支持本地express服务器查看 打包后的文件 甚至给你写了一点示例代码,效果如下: HTTPS站点

技术栈

ES5/6/7 + react16 + react-router4 + redux + axios + less/sass/stylus + antd@3 + decorator + express本地服务器

打包优化

[email protected] + happypack + dllplugin + CommonsChunkPlugin + GLoabal变量

项目源码结构 src目录

HTTPS站点

usage使用指南

推荐首先安装 yarn (sudo npm i -g yarn), 安装软件更快速

下载项目安装依赖

首次进入开发模式, 打包通用库到vendor.js中,使用了dllplugin插件, 打包时被移动到 js目录下

npm run vendor

进入开发模式, 开启项目

npm start 开启前端代码

打包编译, 生成静态资源文件到 build目录下

npm run dev

打包编译, 生成Java项目所需 ${ctx}/static/,上线代码到 build目录下(和dev路径写法不一样)

npm run prod 如果需要的代码不是这样的格式, 可以修改: config/scripts/build.js:98中的相关内容, 该代码只是替换生成后index.html和css代码中的图片路径

编译后的 build目录

HTTPS站点

在本地服务器中预览,打包后的效果, 即查看 build 中的静态文件, 自动打开浏览器, 端口为 3002

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 是针对上线代码的.

联系方式

如有任何疑问和建议, 请联系我 [email protected], 谢谢

New
(39)
• Released: May 08, 2020, 02:10 AM

React Ant Design Dllplugin Startkit

Author: iceyangcc
Item was Featured Author was Featured
FREE
react项目模板,react项目脚手架,集成 antd(ant-design), 支持 sass/less/stylus, 公共模块提取, dllplugin插件,高阶组件,decorator; 基于react16 react-router4 redux;持续优化中... size
git clone https://github.com/iceyangcc/react-ant-design-dllplugin-startkit.git