一个优雅的 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 的时候,找到了一些灵光一现的写法。
发现 vuex 的webpack 写法相对于 create-react-app ,解决了一些的问题,如:
目录更加优雅 - 打包的脚本文件都在一个叫build 的目录下,我个人是个比较代码洁癖的人。
根据不同环境 有不同的 webpack.config
多项目输出
理想的 react + webpack
我需要的 react + webpack 开发环境 的基本功能有
支持 es6 语法
重载,热加载功能
stylus
多项目支持
样式分离
打包
当然后期 还想加入一些 其他功能
单元测试 - 类似 e2e
代码评分 - 检查代码质量
多项目支持
因为有的时候 一个环境里有多个项目,并且希望不用改 webpack 配置文件,根据目录自动添加项目
这个特性 参考了一下 上面 vuex -webpack 里的写法,
实现原理是 遍历 目录下的文件夹,如果文件夹下面含有 app.js 存在,就新建一个跟目录名一样的打包输出文件,类似一个项目,这样做的好处是,新增项目的时候,不需要再修改 webpack.config 文件了。是不是非常方便?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。