一个经过优化的react脚手架，拿来就能开发

UnixAgain 发布于2019-08-22 18:35 / 2800人阅读

摘要：拿来即用的脚手架没有使用，直接走显性配置，使配置透明。脚手架是我根据大多数公司的业务，取其共同需求搭建的，并且做了项目优化，不管小项目还是大项目都可以很好的支撑。建议项目公共样式包括框架装饰页使用，页面级样式采用，以防止样式污染。

react-ve

拿来即用的 react 脚手架

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

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

一点建议

建议使用typescript开发

在数据控制方面，推荐你使用ImmutableJs来控制数据，因为它和react真的是绝配

页面经常会存在用户操作时出现的组件，比如通过点击出现弹框，如果弹框内容过大，推荐你使用async-loadable，它能很方便的获取按需加载的组件。

在样式方面，建议公用的样式使用less直接引用在入口文件中，页面级样式使用styled-components

优化

代码丑化压缩

代码分割(code-splitting) 模板使用基于路由的动态导入

使用 DLL 将公用依赖库模块封装为一个独立文件

安装及使用

npm install react-ve -g

react-ve init [projectName]

启动项目

cd [projectName]

yarn 或 npm install

npm run dll

npm start

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

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

默认使用技术栈：

react

typescript

antd

styled-components

react-router-dom

immutable

你可以根据喜好来install或uninstall它们。

建议：

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

DLL ：

在webpack.dll.config.babel.js中，默认打包的公共包包括：

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

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

云服务器 GPU云服务器刺激战场就开了一个服务器 react开发神器阿里云服务器就一个c盘怎么办 docker react 开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96029.html

利用 Nowa 分分钟创建和维护 React 应用，抛弃命令行

摘要：接下来会介绍如何使用快速开发应用。但是因为是教程，所以我们点按钮创建项目。从创建到启动，不过一分钟的事情，是不是超级方便快捷呢小特性用户可以在右侧命令集区添加自定义命令，所有的命令都一键运行，你都不需要打开终端了。前言吐槽前端的技术发展辣么快，对于前端新手来说，我还没怎么使用 jQuery 开发界面就要换成Angular & Vue & React & ... 更复杂的是，用户还要...

coolpail 2019-08-20 15:49 评论0 收藏0
浅谈MVC,MVP,MVVM渐进变化及React与Vue比较

摘要：将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。此示例使用类似的语法，称为。执行更快，因为它在编译为代码后进行了优化。基于的模板使得将已有的应用逐步迁移到更为容易。前言因为没有明确的界定,这里不讨论正确与否,只表达个人对前端MV*架构模式理解看法,再比较React和Vue两种框架不同.写完之后我知道这文章好水,特别是框架对比部分都是别人说烂的,而我也是打算把...

DrizzleX 2019-08-26 10:36 评论0 收藏0
网易音乐版轮播-react组件版本

摘要：说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播排版时候有极大关联。说明：此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播...

赵春朋 2019-08-30 13:59 评论0 收藏0
网易音乐版轮播-react组件版本

摘要：说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播排版时候有极大关联。说明：此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播...

whidy 2019-08-01 18:38 评论0 收藏0
网易音乐版轮播-react组件版本

摘要：说明此版本轮播图为仿照网易云音乐播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播排版时候有极大关联。说明：此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播...

Tikitoo 2019-08-22 14:47 评论0 收藏0