init-react: 类似 vue-cli 的 react 脚手架工具

前端外刊评论 2018-01-11

最近想用 react 搞点事情, 却发现 create-react-app 并不如 vue-cli 般好用, 比如默认隐藏所有配置文件, eject后项目结构混乱,不支持 hot-module-replace 等, 于是参考 vuejs-templates/webpack 的项目结构,以及 vue-cli 的API,开发了 init-react 脚手架。

init-react 可以生成和 vue-cli/webpack 类似的项目结构,同时支持 eslint、devServer、 HMR、js/css 压缩、文件hash、提取vendor等功能,同时简化了配置,方便大家根据自己实际需要来修改配置文件。

简单演示下如何使用。

npm i -g init-react
react init react-demo
cd react-demo
npm i
npm run dev
init-react: 类似 vue-cli 的 react 脚手架工具

简单的安装过程,中途会询问你是否使用 eslint、react-router 等,最后生成的项目结构如下:

init-react: 类似 vue-cli 的 react 脚手架工具

项目使用了 react-hot-loader 来实现模块热替换,在不刷新页面的情况下也能实时看到修改代码的结果。

运行起来的效果如图:
init-react: 类似 vue-cli 的 react 脚手架工具

考虑到多数情况下并不需要 redux, 所以目前还没有添加 redux 配置, 可能会在以后的版本中加入,同时未来还会加入单元测试等。

最后,欢迎大家使用 init-react 来创建 react 项目, 使用中遇到任何问题请提 issue, 同时欢迎 PR。 github:init-react

相关推荐