一个优雅的 wabpack + react 脚手架 : react-starter

前端之家收集整理的这篇文章主要介绍了一个优雅的 wabpack + react 脚手架 : react-starter前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一个优雅的 wabpack + react 脚手架 : react-starter

去年 8月份 开始接触 react,然后开始使用 webpack 。

经过 几个月的摸索,加上参考一些 github 上别人的代码,整理了一个自己 用着还算舒服的,并且目录优雅的 webpack 前端开发架构。

欢迎 star ,互相学习
https://github.com/qilei0529/...

Create-react-app

刚学react 的时候是想找一个方便 新建一个 react 开发环境。
找到了一个 叫 create-react-app 的 工具,特别好用。
GitHub - create-react-app

她有我需要的大部分功能,不过想自己修改点东西的时候比较麻烦,因为她是一个npm 包。于是就有了类似的想法。

vuex webpack

后来 在接触 vuex 官方 代码 example 的时候,找到了一些灵光一现的写法。

GitHub - vuejs/vuex

发现 vuex 的webpack 写法相对于 create-react-app ,解决了一些的问题,如:

  • 目录更加优雅 - 打包的脚本文件都在一个叫build 的目录下,我个人是个比较代码洁癖的人。

  • 根据不同环境 有不同的 webpack.config

  • 多项目输出

理想的 react + webpack

我需要的 react + webpack 开发环境 的基本功能

当然后期 还想加入一些 其他功能

  • 单元测试 - 类似 e2e

  • 代码评分 - 检查代码质量

多项目支持

因为有的时候 一个环境里有多个项目,并且希望不用改 webpack 配置文件,根据目录自动添加项目

这个特性 参考了一下 上面 vuex -webpack 里的写法,
实现原理是 遍历 目录下的文件夹,如果文件夹下面含有 app.js 存在,就新建一个跟目录名一样的打包输出文件,类似一个项目,这样做的好处是,新增项目的时候,不需要再修改 webpack.config 文件了。是不是非常方便?

猜你在找的React相关文章