Generator-react-app-cli
Is a cli for creating react project projects work.
有时候我们在使用create-react-app时候，会发现其缺少定制功能，从而我们需要从node_modules中寻找对应的文件进行修改，但团队开发中不能确保node_modules中对应的文件的大家都一致，所以我们需要扩展这功能，不得不承认create-react-app是一款很优秀的脚手架。本项目是基于create-react-app和社区等优秀的脚手架，把所有项目的配置文件均放在config目录下，提供给开发者自定修改，但大部分情况，甚至最好不要修改 config 目录下的文件，因为项目提供配置文件升级的功能，所以会覆盖掉你修改的文件。作者会把实用的功能均通过配置文件peak.json提供给开发者，你也可以把需求和好的建议通过issues告诉我。
该工具的出发点是不采取过分的抽象和极其复杂的去简化，把大部分通用的功能简化成配置文件出来，同时保留并区分好各类的 config 文件给开发者去适配所需的场景。
Table of Contents
Requirements
node >= 7.6yarn >= 0.22npm >= 4.xUse
# Install $ npm i generator-react-app-cli -g # Create app $ peak new myapp # Start app $ cd myapp$ npm i$ npm run dev # Upgrade $ npm updateRemarks
npm update，升级需要先更新generator-react-app-cli，升级会覆盖/config、/bin，如果有修改过其下的文件，请备份。
Features
- support redux/redux(ts) boilerplate.
- support service work.
- support typescript.
- support command update config(But don’t modify files in the current config directory).
- support single/multi page.
Plan
Future plans
a
- support mobx boilerplate(Development ing).
- support mobx typescript boilerplate(Development ing).
- support srr page(Development ing).
- support multi page.
ConfigFile
Please edit peak.json.
| key | Description | value |
|---|---|---|
| version | 版本号 | |
| language | 脚本类型 | js or ts |
| bundleAnalyzer | 模块资源大小分析功能 | 默认false |
| bundleBuddy | 打包后各资源文件分析功能 | 默认false |
| lodashJS | lodash.Js按需打包 |
默认false |
| vconsole | 移动端开发提供console打印等功能 |
默认false |
| host | 默认localhost |
|
| port | 端口地址 | 默认3000 |
| mock_port | mock server端口地址 |
默认3001 |
| globals | 程序全局变量，webpack DefinePlugin |
默认{} |
| public_path | 应用的资源相对路径 | 默认/ |
| js_path | js 资源的路径 | 默认static/js/ |
| css_path | css 资源的路径 | 默认static/css/ |
| media_path | media 资源(其它)的路径 | 默认static/media/ |
| html | 模板变量，可以在 html 中<script src="%键名%"></script>输出 |
默认{} |
| compiler_commons | 公用资源打包，建议自定义公用的 js 代码 | 默认[] |
| compiler_vendors | 公用资源打包，建议打包第三方的依赖，使用的是webpack Dll相关功能 |
默认[],没值该功能关闭 |
| sw | service work 的配置, 内置配置./config/sw/sw.config.js |
默认{} |
| pre | PreloadWebpackPlugin插件，当无配置时候默认关闭该功能 | 默认{} |
Describe
describe about config
details
目前 typescript 开发的话就只能依赖 package.json 里面标明的版本号，如果升级后会出现一些错误信息，现阶段建议使用 es 模板。
pre
在资源加载上有时需要prebrowsing，提前加载或者缓存文件，也是静态资源加载优化的一种方法。
prebrowsing
- dns-prefetch：DNS 预解析，告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。多在使用第三方资源时使用。
- preconnect：预连接，完成 DNS 预解析同时还将进行 TCP 握手和建立传输层协议。
- prerender：预渲染，预先加载文档的所有资源，类似于在一个隐藏的 tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。
- prefetch：预获取，使用 prefetch 声明的资源是对浏览器的提示，暗示该资源可能『未来』会被用到，适用于对可能跳转到的其他路由页面进行资源缓存。被 prefetch 的资源的加载时机由浏览器决定，一般来说优先级较低，会在浏览器『空闲』时进行下载。
- preload：预加载，主动通知浏览器获取本页的关键资源，只是预加载，加载资源后并不会执行；
前三种浏览器默认内置的优化，prefetch和preload需要根据实际开发情况。美团点评 Web 静态资源缓存及优化
DevExperience
- 建议编辑器
vscode安装prettier插件，项目安装prettier-eslint，搭配eslint会根据 eslint 规范自动代码格式化
License
Generator-react-app-cli is MIT licensed.
End
If you have any questions, you can give me issues！Thank you!