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

前面两篇文都只是铺垫，今天至少要实现一个简单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脚手架（四）