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
• Use
• Features
• Plan
• log
• ConfigFile
• DevExperience
• License
• End

Requirements

node >= 7.6
yarn >= 0.22
npm >= 4.x

Use

# Install
$ npm i generator-react-app-cli -g

# Create app
$ peak new myapp

# Start app
$ cd myapp
$ npm i
$ npm run dev

# Upgrade
$ npm update

Remarks

• 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

• [x] support mobx boilerplate(Development ing).
• [ ] support mobx typescript boilerplate(Development ing).
• [ ] support srr page(Development ing).
• [x] 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!