从零开始开发一个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脚手架（四）