摘要：前面两篇文都只是铺垫，今天至少要实现一个简单的开始之前再说一下垫片和。我一开始以为会在引入，但并不是。这是我的，当然以后会拆出来，作为目录下的一个执行文件。里面就配置了一个。下一篇从零开始开发一个脚手架四
前面两篇文都只是铺垫，今天至少要实现一个简单react的hello word
开始之前再说一下垫片和presets。 前几天突发疑问，create-react-app是怎么做的垫片，因为很多语法或者API不一定兼容所有浏览器，所以需要有垫片(polyfill)去帮我们做兼容。我一开始以为会在entry引入@babel/polyfill，但并不是。而是引入了一个babel-preset-react-app。
如果有自己写webpack配置的经验，应该明白我们配置babel的时候，引入了许多的preset和一些plugins，比如@babel/preset-env,@babel/preset-react, @babel/plugin-proposal-object-rest-spread(支持对象展开符) @babel/plugin-syntax-dynamic-import（支持异步import语法）等等，还有很多。但是这个presets集合了很多很多preset，这样我们就没必要分别引入了。
可以看到这个preset里面还有 @babel/runtime 这个就是垫片库了，结合这个 @babel/plugin-transform-runtime可以做到按需加载垫片库，具体和@babel/polyfill的差别就不说了，自己去查询文章。
参考create-react-app，我简化了他的N多目录和结构，去掉了很多的兼容拓展。当然先只是简单实现了一个类似于npm run start。
这是我的index.js，当然以后会拆出来，作为bin目录下的一个执行文件。
cli-view
当执行 node ./src/cs.js,就会进行打包构建了。
会自动打开默认浏览器
简单说下三个文件webpackConfig，devServerConfig，config。
当然了应为还只是最初版本，很多细节功能压根没有。
先说下config.js
这个就是单纯的cache一些环境配置，当然我仍然依赖了一下webpack.config.js，其实这个是纯粹一个暴露在项目中的配置文件，它也可以叫其他名字例如app.config.js之类的。
里面就配置了一个entry。create-react-app貌似默认去的就是src下的index.jsx，其实我们也可以这样玩，但我觉得暴露个entry的入口配置，灵活性更高点。毕竟我们还可以玩多页面。至于到底怎么整，大家可以自己取舍。
createWebpack.js里面就是我们平常看到的配置文件了。
这里有几个细节要提一下，1 比如写配置loader的时候，我一开始直接babel-loader，报错找不到babel-loader,我估摸着是它的逻辑是走到了项目目录下去找了，而我的项目目录没有安装这个，所以我按照create-react-app的来，加上了require.resove，估计走的就是脚手架的node_modules去找babel-loader，就没报错了。 2 babel的presets我也直接用的是babel-preset-react-app（其实就是几个preset的集合）3 写脚手架的时候稍微注意下目录，别搞混了，比如process.cwd()，__dirname之类的。
createDevServer就最简单了，就是一个简单的serve配置了。但后续应该还要加上代理之类的。因为现在自己手上的项目都是引入了node，用不到webpack-dev-server。我估计用这个调用后台接口的时候，要么自己起nginx项目做转发，不然就在这里设置proxy。不然跨域。
虽然看起来简单，但真正自己敲着代码来，还是会发现好多细节问题。因为功能还非常不完整，比如css,热加载都还没有就暂时不放到git上了。但下一期完善功能就放上去。
下一篇 从零开始开发一个react脚手架（四）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103292.html
摘要：弄清之后，就去脚手架源代码里面找。这样更加灵活，而且复用性高，起新项目，如果差别不大，几乎可以做到零配置，这样开发者压根就不需要关心业务之外的东西从零开始开发一个脚手架三 上一篇已经初步整了个kkk-react，这一篇不写代码，粗略讲解下create-react-app的部分源码。 前沿：科普下看源码的思路。以本人看过N多源码的经验总结，想要看这种脚手架或者npm包的源码，第一步就是看...
摘要：关于和，其实单纯问两者的区别，大家都知道，一个是开发依赖，一个是线上依赖。因为一开始的开发不规范，导致我随意乱装。。一个包可以再大点。脚手架已经实现了三分之一，现在是直接来作为脚手架，到最后效果应该是的形式，不过命令内容已经实现和。 前言：最近天天加班做新项目，Taro版的小程序，还要实现富文本加海报，踩了不少坑，下次专门开个坑说一下。 回到脚手架，说实话从头写一个，即便是参考crea...
摘要：第一步创建两个项目这个是脚手架项目，脚手架说白点就是项目了，但要时时看效果，总不能一直到，所以需要。但因为是开发脚手架啊，这一步可以放到最后来弄，先把打包构建的步骤弄好。 前沿： 脚手架工具一大堆，但如果全部用第三方的脚手架，项目做起来肯定束手束脚，想来点差异化的东西都很难，所以最好是整一份自己的脚手架工具，想咋玩咋玩。阅读了next脚手架和create-react-app脚手架源码，...
摘要：根据配置经验，还需要配置一个，根据我实际的测试结果，不用手动加入这个也可以实现热更新。我们公司的脚手架没用这个结果，导致自己额外增添了很多配置。，走到这里，我们会发现只实现了第一步页面自动刷新。很细，很有意思从零开始开发一个脚手架五 这一篇可能主要讲的是热更新，写的很细，遇到很多有意思的地方，一一和大家讲解下。 前沿：webpack-dev-server支持热更新，简单的说就是你修改...
摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。 一、 快速开始： 全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...
阅读 2809·2021-10-26 09:48
阅读 1670·2021-09-22 15:22
阅读 4028·2021-09-22 15:05
阅读 608·2021-09-06 15:02
阅读 2606·2019-08-30 15:52
阅读 2106·2019-08-29 18:38
阅读 2754·2019-08-28 18:05
阅读 2332·2019-08-26 13:55
