共计 2547 个字符，预计需要花费 7 分钟才能阅读完成。
前言：最近天天加班做新项目，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
有问题就留言，必定回复，给个赞呗
