一个经由优化的react脚手架,拿来就可以开辟

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
    原文地址: https://segmentfault.com/a/1190000015578071
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞