一个很好的react-redux-webpack-ES6/7项目架构（高维护性）

#1

一个好的架构，可以不断往里面添加轮子或者删除轮子，而不影响整体的功能，从一个企业网站系统长远的维护来看，工程化是必须在开发初期就要考虑好的。

项目地址：https://github.com/hyy1115/react-redux-webpack

适用人群：前端项目架构师以及团队开发或者需要长期维护的开发者

本项目包含了开发阶段的调试、代码检查、开发效率、热更新、state存储模式、异步模式、组件结构的管理、打包部署到服务器。

最后，正视react工程化的作用，好的前端工程师，一定是一个架构师，我也正在这条路上奔跑。。 =——=

1 Like
#2

挺好的，但我更推荐react-boilerplate中的文件结构，可以异步加载reducer、saga和组件

#3

saga我一直没有添加进来的打算，因为想不到目前的结构足够使用，为什么还要添加一个新的插件，我现在在考虑如何删掉那些冗余的插件，react伴随的插件太多，会导致很多无用的代码打包进来。

#4

saga确实增加很多代码量，而且saga的异步加载也很难用。
另外我看css没有抽取，是在异步加载下，webpack1与ExtractTextPlugin的兼容性问题吗？
最后我想问下打包状况是否理想，我的项目common chunk很大，总觉得webpack有问题

#5

css抽取一直有个错误，然后我就没理他了，1年前我还能抽取css，现在突然就被难倒了:sweat: 也许是webpack版本的问题吧。
按路由拆分打包，一个路由对应一个js文件，以便做服务器渲染的时候对接。

common文件也不是非必要的，只能说是一种代码分离方案吧。在做了服务端压缩之后，其实用户请求的js文件也就几十K

#6

webpack2与ExtractTextPlugin2是兼容的，之前的不可以了

#7

以为现在不用考虑低版本浏览器的兼容性了，然后跑来了插件的兼容性，前端要永不停止折腾啊。

#8
  • 没办法hot load stateless的component
  • 不对dev dependencies 和 production dependencies做严格的区分真的好吗
#9

你所说的无状态组件是指哪种？因为我没遇到不能热更新的情况，dependencies不做配置会有什么副作用，还没了解清楚，你知道吗？

#10
  • 无状态组件指非class，直接是一个function的组件，例如
() => (
   <h1>
     hello world
   </h1>
)
  • 不做严格区分其实就是production build的时候也会把一些不必要的东西build进来，比如mocha之类的显然在production的环境下是绝对不会用到的。当然，有的人觉得影响不大。
#11

src目录下面的js，css，files都支持热更新，不只是针对组件，也许是你没有实例化无状态组件，所以看不到变化，但是通常只要修改了任意一个文件，command + s都可以看到控制台有更新。

关于dependencies，我很好奇的是它只是作为一个依赖环境的配置，假设没有配置mocha，那么他不应该打包进来，production环境下打包仅是打包import或者require相关的文件吧。

对于很多开发者来说，并不能完全确定哪些插件是必须开发环境和生产环境分开的，毕竟几十个插件，缺少了某个项也许都会导致线上出现坑。

#12
  • 第一个问题我是被坑过的，即使实例化了也无法热更新。这种pure component的在hot loader 1.x版本中都是不支持的，要用3.x的版本才行，但是3.x的版本还在beta阶段（不过我已经用了很长时间了觉得完全没问题）。
  • 第二个问题你说的有一定的道理，所以我说有的人觉得影响不大。**个人观点：**某种程度上，作为一个开发者，弄不明白自己的项目那些dep是必须的，哪些只是开发用的，那么可以说他对项目的掌控是不够的吧。
#13

对项目能够了如指掌的人比较少，再说react本身就超级多的坑，除非是高级工程师，否则谁敢说自己对项目掌控力好，真的有那么牛逼的掌控力，还需要测试代码做什么呢？那么厉害的人也不会跑来看我的代码了。

至少我没达到那么高的掌控力，不过对于自己框架里面出现的bug大部分还是能猜到哪一部分出了问题的。