一个优雅的 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 开发环境 的基本功能有

• 支持 es6 语法

• 重载，热加载功能

• stylus

• 多项目支持

• 样式分离

• 打包

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

• 单元测试 - 类似 e2e

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

多项目支持

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!