从零开始开发一个react脚手架（五）

前言：最近每天加班作新项目，Taro版的小程序，还要实现富文本加海报，踩了很多坑，下次专门开个坑说一下。 回到脚手架，说实话从头写一个，即使是参考create-react-app，仍是遇到了不少不少问题，这些都是须要本身亲自写过，才能有所体会。
此次会写的有杂乱一点，就说说本身遇到的哪些问题。虽然尚未所有完工，可是已经可以基本使用，最下面会贴git地址

问题一 如今基本实现了两个命令，start和build，start就是启动webpack-dev-server，这是开发环境, build就是构建，是production环境。 无论什么命令都须要依赖 NODE_ENV=development或者production，这样会致使每次npm run 的时候都要加上NODE_ENV,并且这个还不能直接写在script命令里面，由于window是不支持，须要安装第三方库。最后参考create-react-app

直接赋值，简单粗暴。 一开始没想到能够这么简单粗暴，走了歪路，想要经过DefinePlugin来实现赋值，但其实这反却是错误的路线。须要理解编译工具所依赖的NODE_ENV和业务代码里面的NODE_ENV是不一样的，DefinePlugin其实就是个简单的全局变量替换，只能替换chunk里面的。

问题二 优化createWebpack，一开始的作法极为简单，直接export一个对象，致使灵活性不好，后来改为导出一个方法，接收各类配置参数，返回一个webpackConfig。

问题三 webpack-dev-serve，这个问题捣鼓了好久好久。关于webpack-dev-serve的contentBase配置。一开始我设置的是dist目录，也就是打包后的目录，即output设置的path。由于之前都是这样玩的，可是这样意味着服务依赖了一个打包构建后的目录dist，不然没有办法找到index.html。这样就很诡异，难道第一次start都必须先build一下吗？很不合理，并且build的时候NODE_ENV必须是development，不然js的引用地址就成了线上地址。而根据上面一个问题，简单粗暴在代码里面写死NODE_ENV就很难改变环境变量了，build出来的只能是线上。
看了好久的create-react-app的源码，由于这个脚手架并不须要先build，一开始觉得他在start的时候作了什么特殊处理，后来才发现压根不是，它的webpack-dev-server配置的cotentbase居然不是dist，而是原始目录src/index.html。。。
这样我很震惊啊，由于我想的是，js什么的，css什么的引入都必须是在webpack build以后才知道的，由于会作拆分剥离的处理，JS的文件个数和名字不肯定，若是引入的是原始目录，那么究竟是在哪儿作的JS和CSS插入操做呢，为此寻遍了源码，一个个去找plugin，但最后发现其实压根很简单。
在于html-webpack-plugin，貌似它会先在内存中生成一份html,想要访问内存地址直接就是
localhost:3000，而webpack-dev-server应该是优先去取内存中的index.html，没取到就会去cotentbase中找，也就是说和cotentbase压根没有半毛钱关系。
产生错觉的缘由在于，内存中没找到，而cotentbase中一样没找到，就会报404。至于为嘛没有取到内存中的值，在于我闲的没事，设置了publicPath，为/assets/这样致使，想要访问html的地址就变成了localhost:3000/assets/index.html。其实开发环境压根不必设置assets，没半毛钱做用。

问题四 这个就是很蠢的一个问题了，很粗心。关于dependencies和devDependencies，其实单纯问二者的区别，你们都知道，一个是开发依赖，一个是线上依赖。可是咱们实际开发中，不论是你开发依赖仍是线上依赖，其实全部的包都会安装，因此有的时候装错地方，也没啥的。but。。。若是你开发的是第三方包，这个问题就大了。。。若是是第三方包，只会安装第三方包的dependencies。由于一开始的开发不规范，致使我随意乱装。。结果查了半天，一直报XXX包找不到。。捣鼓了好久，才发现是个这么简单的问题。

问题五 关于npm publishi的时候若是报权限或者什么其余问题的错，十有八九是 设定了源的路径，若是是淘宝源或者公司源，须要切换回npm默认源，才能够发布。

问题暂时就想到这么多了。其实脚手架最简单的反而是webpack配置了，这些东西一搜索网上一大把，配置消息我就很少说了。说几个值得注意的地方。。第一就是splitChunks，这个设置拆包大小的时候记得注意单位，30000这个是30kb。因此我写的是100000,意味着要拆成独立的包，压缩前必须有100KB，其实还能够设置大一点，你想一想100KB压缩后估计就50，再来个GZIP就是20KB左右了。一个包能够再大点。
但若是是http2，也能够不用拆太大，毕竟多路复用吗。 第二就是关于静态资源引用的问题，其实我以为本地业务代码里面彻底不用引入静态资源，统统丢到云服务器就好，好比静态图片，我都是统统扔到七牛服务器，代码里面直接写死，爽歪歪，还能享受CDN加成和http2.

react+router+redux

说的有点乱，想到啥写啥。主要是事件间隔有点久了，最近加班太忙。

脚手架已经实现了三分之一，如今是直接clone git来做为脚手架，到最后效果应该是npx的形式，不过命令内容已经实现 easy-react start和 easy-react build。
代码已经更新到git了，方便给个star。 easy-react即命令的实现源码还没扔上去，等后续完工了再扔上去。毕竟还有服务器端的部分没实现。

脚手架工具不少，我以为有时间仍是本身维护一份的好，想咋玩就咋玩，想升级就升级，本身定制。

git init
git clone https://github.com/417673259/...
npm install
npm run start

有问题就留言，一定回复，给个赞呗