摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。
前言：最近天天加班做新项目，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
有问题就留言，必定回复，给个赞呗
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104065.html
摘要：根据配置经验，还需要配置一个，根据我实际的测试结果，不用手动加入这个也可以实现热更新。我们公司的脚手架没用这个结果，导致自己额外增添了很多配置。，走到这里，我们会发现只实现了第一步页面自动刷新。很细，很有意思从零开始开发一个脚手架五 这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。 前沿：webpack-dev-server支持热更新，简单的说就是你修改...
摘要：弄清之后，就去脚手架源代码里面找。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西从零开始开发一个脚手架三 上一篇已经初步整了个kkk-react，这一篇不写代码，粗略讲解下create-react-app的部分源码。 前沿：科普下看源码的思路。以本人看过N多源码的经验总结，想要看这种脚手架或者npm包的源码，第一步就是看...
摘要：第一步创建两个项目这个是脚手架项目，脚手架说白点就是项目了，但要时时看效果，总不能一直到，所以需要。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。 前沿： 脚手架工具一大堆，但如果全部用第三方的脚手架，项目做起来肯定束手束脚，想来点差异化的东西都很难，所以最好是整一份自己的脚手架工具，想咋玩咋玩。阅读了next脚手架和create-react-app脚手架源码，...
摘要：前面两篇文都只是铺垫，今天至少要实现一个简单的开始之前再说一下垫片和。我一开始以为会在引入，但并不是。这是我的，当然以后会拆出来，作为目录下的一个执行文件。里面就配置了一个。下一篇从零开始开发一个脚手架四 前面两篇文都只是铺垫，今天至少要实现一个简单react的hello word 开始之前再说一下垫片和presets。 前几天突发疑问，create-react-app是怎么做的垫片，...
阅读 3113·2021-11-04 16:10
阅读 3630·2021-09-29 09:43
阅读 2548·2021-09-24 10:24
阅读 2939·2021-09-01 10:46
阅读 2344·2019-08-30 15:54
阅读 467·2019-08-30 13:19
阅读 3117·2019-08-29 17:19
阅读 911·2019-08-29 16:40
