3

react-ve

拿来即用的 react 脚手架

没有使用create-react-app,直接走webpack显性配置,使配置透明。

脚手架是我根据大多数公司的业务,取其共同需求搭建的,并且做了项目优化,不管小项目还是大项目都可以很好的支撑。

一点建议

  • 建议使用typescript开发
  • 在数据控制方面,推荐你使用ImmutableJs来控制数据,因为它和react真的是绝配
  • 页面经常会存在用户操作时出现的组件,比如通过点击出现弹框,如果弹框内容过大,推荐你使用async-loadable,它能很方便的获取按需加载的组件。
  • 在样式方面,建议公用的样式使用less直接引用在入口文件中,页面级样式使用styled-components

优化

  1. 代码丑化压缩
  2. 代码分割(code-splitting) 模板使用基于路由的动态导入
  3. 使用 DLL 将公用依赖库模块封装为一个独立文件

安装及使用

  1. npm install react-ve -g
  2. react-ve init [projectName]

启动项目

  1. cd [projectName]
  2. yarnnpm install
  3. npm run dll
  4. npm start

在浏览器地址栏中输入:localhost:3000即可访问

项目打包,运行npm run build即可,项目将打包至dist文件夹内

默认使用技术栈:
  1. react
  2. typescript
  3. antd
  4. styled-components
  5. react-router-dom
  6. immutable

你可以根据喜好来installuninstall它们。


建议:

项目公共样式(包括antd、框架、装饰页)使用less,页面级样式采
styled-components,以防止样式污染。


DLL :

webpack.dll.config.babel.js中,默认打包的公共包包括:

entry: {
    vendor: ['react', 'react-dom', 'antd', 'react-router-dom', 'immutable']
  }

你可以根据自己的喜好做删减


alwaysVe
1.9k 声望162 粉丝

前进