feat: 重构yk-cli

zhangyuang · Jun 23, 2019 · 572d155 · i5ting · Jun 24, 2019 · i5ting
1 parent 8237189
commit 572d155
Show file tree

Hide file tree

Showing 51 changed files with 291 additions and 1,264 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -9,10 +9,10 @@ features:
   details: 支持HMR，同时支持本地开发以及生产环境CSR/SSR两种渲染模式无缝切换，支持定制特定组件的渲染模式
 - title: 美
   details: 配置非黑盒，且一切关键位置皆可通过config.default.js来配置
-footer: MIT Licensed | Copyright © 2017-present
+footer: MIT Licensed | Copyright © 2019-present
 ---
 
-## Getting started
+# Getting started
 
 ```bash
 $ npm install yk-cli -g
@@ -23,7 +23,7 @@ $ npm start
 $ open http://localhost:7001
 ```
 
-## 用法
+# 用法
 
 - render是react的视图渲染方法
 - getInitialProps是获取数据方法，将返回值赋值给组件状态
@@ -44,8 +44,11 @@ Page.getInitialProps = async (ctx) => {
 export default Page
 ```
 
-## 社区交流
+# 社区交流
 
 | Pull Request                                                | Github Issue                                            | 钉钉群                                                                                                       |
 | ------------------------------------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
 | [egg-react-ssr/pulls](https://github.com/ykfe/egg-react-ssr/pulls) | [egg-react-ssr/issues](https://github.com/ykfe/egg-react-ssr/issues) | <img src="https://img.alicdn.com/tfs/TB15zfha79E3KVjSZFGXXc19XXa-750-990.jpg" width="60" /> |
+
+推荐使用[umijs](https://umijs.org/zh/)，最新版已经支持SSR以及PreRender。实现方式与本骨架一致，两者不冲突，互相补位，分别适用于开箱即用的场景以及更好的定制化应用场景。
+
diff --git a/example/ssr-with-js/README.md b/example/ssr-with-js/README.md
@@ -1,5 +1,6 @@
 # Egg + React + SSR应用骨架
-[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+详细用法实现请查看[官方文档](http://ykfe.net)
 
 # Getting Start
 
@@ -16,158 +17,17 @@ $ open http://localhost:7001
 
 # 功能/特性
 
-## 已完成
-
-- 基于cra脚手架开发，由cra开发的React App可无缝迁移，如果你熟悉cra的配置，上手成本几乎为0
-- 小而美，相比于beidou，next.js这样的高度封装方案，我们的实现原理和开发模式一目了然
-- 同时支持SSR以及CSR两种开发模式,本地开发环境以及线上环境皆可无缝切换两种渲染模式
-- 统一前端路由与服务端路由，无需重复编写路由文件配置
-- 支持切换路由时自动获取数据
-- 支持本地开发HMR
-- 稳定性经过线上大规模应用验证，可提供性能优化方案
-- 支持tree shaking以及打包去重依赖，使得打包的bundle非常小，为同样复杂度的next.js项目的0.4倍
-- 支持csr/ssr自定义layout，无需通过path来手动区分
-- 支持选择某个具体的组件在客户端还是服务端进行渲染
-
-## 开发中
-
-- 配套[TypeScript](https://github.com/ykfe/egg-react-ssr-typescript)版本的实现
-- 配套serverless版本的实现
-
-# 获取数据
-
-定义组件的静态方法getInitialProps，获取数据的逻辑将统一在这个方法中执行。
-
-当页面初始化加载时，getInitialProps只会加载在服务端。只有当路由跳转（Link组件跳转或 API 方法跳转）时，客户端才会执行getInitialProps。
-
-注意：getInitialProps将不能使用在子组件中。只能使用在pages页面中。
-
-getInitialProps入参对象的属性如下：
-
-ctx: Node应用请求的上下文(仅在SSR阶段可以获取)
-
-Router Props: 路由信息，包括pathname以及Router params等信息，详细信息参考react-router文档
-
-# 目录结构
-
-```
-├── README.md
-├── app // egg核心目录
-│   ├── controller
-│   ├── extend
-│   ├── middleware
-│   └── router.js // egg路由文件，无特殊需求不需要修改内容
-├── app.js // egg 启动入口文件
-├── build // webpack配置目录
-│   ├── env.js
-│   ├── jest
-│   ├── paths.js
-│   ├── util.js
-│   ├── webpack.config.base.js // 通用的webpack配置
-│   ├── webpack.config.client.js // webpack客户端打包配置
-│   └── webpack.config.server.js // webpack服务端打包配置
-├── config // egg 配置文件目录
-│   ├── config.daily.js
-│   ├── config.default.js
-│   ├── config.local.js
-│   ├── config.prod.js
-│   ├── config.staging.js
-│   ├── plugin.js
-│   └── plugin.local.js
-├── dist // build生成静态资源文件目录
-│   ├── Page.server.js // 服务端打包后文件(即打包后的serverRender方法)
-│   └── static // 前端打包后静态资源目录
-└── web // 前端文件目录
-    ├── assets
-    │   └── common.less
-    ├── entry.js // webpack打包入口文件，分环境导出不同配置
-    ├── index.html // 页面骨架模版
-    ├── layout
-    │   ├── index.js // 页面布局
-    │   └── index.less
-    └── page
-        ├── index
-        └── news
-```
-
-# npm scripts
-
-```
-$ npm start // 启动监听7001端口，建议使用方式，同时启动服务端渲染 + 客户端hydrate
-$ npm run ssr // 启动监听7001端口，只启动服务端渲染，此时仅服务端直出html，没有与客户端混合的步骤
-$ npm run csr // 启动监听8000端口，只启动客户端渲染，相当于传统的cra脚手架开发模式
-$ npm run prod // 模拟SSR应用生产环境
-$ npm run build // 打包服务端以及客户端资源文件
-$ npm run analyze // 可视化分析客户端打包的资源详情
-```
-
-# config.default.js 文件配置
-
-为了足够灵活使用，这里我们将一些关键项提供可配置的选项，可根据实际需要来配置，如无特殊必要，使用默认配置即可。
-
-```js
-const resolvePath = (path) => require('path').resolve(process.cwd(), path)
-
-module.exports = {
-    keys: 'eggssr',
-    type: 'ssr', // 指定运行类型可设置为csr切换为客户端渲染
-    static: {
-        // 设置Node应用的静态资源目录，为了生产环境读取静态资源文件
-      prefix: '/',
-      dir: resolvePath('dist')
-    },
-    routes: [
-        // 前后端统一使用的路由配置文件，防止重复编写相同的路由
-      {
-        path: '/', // 请求的path
-        exact: true, // 是否精确匹配
-        Component: () => (require('@/page/index').default), // 这里使用一个function包裹为了让它延迟require, 否则Node环境无法识别前端组件中用到的import关键字会报错
-        controller: 'page', // 需要调用的controller
-        handler: 'index' // 需要调用的controller中具体的method
-      },
-      {
-        path: '/news/:id',
-        exact: true,
-        Component: () => (require('@/page/news').default),
-        controller: 'page',
-        handler: 'index'
-      }
-    ],
-    template: resolvePath('web/index.html'), // 使用的模版文件路径
-    injectCss: (chunkName) => ([
-      `/static/css/${chunkName}.chunk.css`
-    ]), // 客户端需要加载的静态css文件资源
-    injectScript: (chunkName) => ([
-      `<script src='/static/js/runtime~${chunkName}.js'></script>`,
-      `<script src='/static/js/vendor.chunk.js'></script>`,
-      `<script src='/static/js/${chunkName}.chunk.js'></script>`
-    ]), // 客户端需要加载的静态js文件资源
-    serverJs: (chunkName) => resolvePath(`dist/${chunkName}.server.js`) // 服务端需要使用的打包后的serverRender方法js文件的路径
-}
-```
-
-# 执行流程
-
-![](https://gw.alicdn.com/tfs/TB11BwkX8Gw3KVjSZFDXXXWEpXa-2050-1502.jpg)
-
-# 与其他方案的对比
-
-- 与[easy-team](https://github.com/ykfe/egg-react-ssr/wiki/与easy-team实现方案的对比)方案的对比  
-- 与[next.js](https://github.com/ykfe/egg-react-ssr/wiki/与next.js实现方案的对比)方案的对比
-
-# 答疑群
-
-虽然我们已经尽力检查了一遍应用，但仍有可能有疏漏的地方，如果你在使用过程中发现任何问题或者建议，欢迎提[issue](https://github.com/ykfe/egg-react-ssr/issues)或者[PR](https://github.com/ykfe/egg-react-ssr/pulls)
-欢迎直接扫码加入钉钉群
-<img src="https://img.alicdn.com/tfs/TB1CONSclGE3KVjSZFhXXckaFXa-750-990.jpg" width="300">
-
-## Contributors
+- [x] 基于cra脚手架开发，由cra开发的React App可无缝迁移，如果你熟悉cra的配置，上手成本几乎为0
+- [x] 小而美，相比于beidou，next.js这样的高度封装方案，我们的实现原理和开发模式一目了然
+- [x] 同时支持SSR以及CSR两种开发模式,本地开发环境以及线上环境皆可无缝切换两种渲染模式
+- [x] 统一前端路由与服务端路由，无需重复编写路由文件配置
+- [x] 支持切换路由时自动获取数据
+- [x] 支持本地开发HMR
+- [x] 稳定性经过线上大规模应用验证，可提供性能优化方案
+- [x] 支持tree shaking以及打包去重依赖，使得打包的bundle非常小，为同样复杂度的next.js项目的0.4倍
+- [x] 支持csr/ssr自定义layout，无需通过path来手动区分
+- [ ] 配套[TypeScript](https://github.com/ykfe/egg-react-ssr-typescript)版本的实现
+- [ ] 配套serverless版本的实现
 
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
-<table><tr><td align="center"><a href="https://github.com/zhangyuang"><img src="https://avatars3.githubusercontent.com/u/17424434?v=4" width="100px;" alt="LeonCheung"/><br /><sub><b>LeonCheung</b></sub></a><br /><a href="https://github.com/ykfe/egg-react-ssr/commits?author=zhangyuang" title="Code">💻</a></td><td align="center"><a href="http://i5ting.com"><img src="https://avatars3.githubusercontent.com/u/3118295?v=4" width="100px;" alt="狼叔"/><br /><sub><b>狼叔</b></sub></a><br /><a href="https://github.com/ykfe/egg-react-ssr/commits?author=i5ting" title="Code">💻</a></td><td align="center"><a href="http://www.lessing.online/xx-blog/"><img src="https://avatars2.githubusercontent.com/u/21156871?v=4" width="100px;" alt="Xu Zhiyong"/><br /><sub><b>Xu Zhiyong</b></sub></a><br /><a href="https://github.com/ykfe/egg-react-ssr/issues?q=author%3AJohnieXu" title="Bug reports">🐛</a></td><td align="center"><a href="http://zxy.im"><img src="https://avatars2.githubusercontent.com/u/15117664?v=4" width="100px;" alt="zhaoxingyue"/><br /><sub><b>zhaoxingyue</b></sub></a><br /><a href="https://github.com/ykfe/egg-react-ssr/commits?author=zhaoxingyue" title="Code">💻</a></td><td align="center"><a href="https://github.com/zhusjfaker"><img src="https://avatars1.githubusercontent.com/u/31839470?v=4" width="100px;" alt="zhushijie"/><br /><sub><b>zhushijie</b></sub></a><br /><a href="https://github.com/ykfe/egg-react-ssr/commits?author=zhusjfaker" title="Code">💻</a></td></tr></table>
-<!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/yk-cli/.gitignore b/packages/yk-cli/.gitignore
@@ -64,7 +64,3 @@ package-lock.json
 cache/**
 
 bin
-
-javascript.version.json
-
-typescript.version.json
diff --git a/packages/yk-cli/README.md b/packages/yk-cli/README.md
@@ -1,122 +1,20 @@
 # yk-cli
 
+用于快速创建一个Egg + React + SSR 应用的脚手架
 
-### 安装
-
-* npm install . -g 
-
-* npm install yk-cli -g
-
-
-### 命令介绍
-
-* 创建 ykcli init  || ykcli init 应用名(可选)
-
-* 帮助 ykcli help 
-
-* 增加组件 ykcli generate component 组件名 || ykcli gc 组件名 (待实现)
-
-### 开发模式
-
-* 开发 npm run dev
-
-* 构建 npm run build
-
-* 发布 npm publish
-
-### 注释工具
-
-* Document this (https://marketplace.visualstudio.com/items?itemName=joelday.docthis)
-
-### vscode 调试文件
-
-* .vscode/launch.json
-
-```json
-
-{
-    "version": "0.2.0",
-    "configurations": [{
-            "type": "node",
-            "request": "launch",
-            "name": "Launch via NPM",
-            "runtimeExecutable": "npm",
-            "cwd": "${workspaceRoot}",
-            "console": "integratedTerminal",
-            "protocol": "inspector",
-            "restart": true,
-            "windows": {
-                "runtimeExecutable": "npm.cmd"
-            },
-            "runtimeArgs": [
-                "start",
-                "init"
-            ],
-            "port": 19229
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "node",
-            "program": "${workspaceRoot}/bin/index.js",
-            "sourceMaps": true,
-            "cwd": "${workspaceRoot}",
-            "runtimeArgs": [
-                "--inspect-brk=19229"
-            ],
-            "console": "integratedTerminal",
-            "protocol": "inspector",
-            "restart": true,
-            "args": [
-                "init"
-            ],
-            "port": 19229
-        }
-    ]
-}
+# Getting Start
 
+如何使用
 
 ```
-
-### 文件结构
-
+$ npm install yk-cli -g
+$ ykcli init <Your Project Name>
+$ cd <Your Project Name>
+$ npm i
+$ npm start
+$ open http://localhost:7001
 ```
-.
-├── LICENSE
-├── README.md
-├── bin                                     // 输出的运行的Js命令行文件
-├── help.txt                                // 命令行帮助输出内容
-├── package.json
-├── src                                     // 开发源码文件
-│   ├── app.ts                              // 初始化app
-│   ├── cache.ts                            // 处理缓存
-│   ├── config.ts                           // 应用配置选项
-│   ├── help.ts                             // 帮助显示
-│   ├── index.ts                            // 命令行入口
-│   ├── interface
-│   │   └── option.ts                       // 应用配置接口类型
-│   ├── package.ts
-│   ├── util
-│   │   ├── fileconfig.ts                   // 获取文件配置
-│   │   ├── readFileList.ts                 // 递归文件夹文件
-│   │   ├── render.ts                       // 模板渲染方法
-│   │   ├── versionCompare.ts               // 缓存与线上版本比对
-│   │   └── versionEffective.ts             // 获取线上版本 判断缓存是否有效
-│   ├── webcomponent.ts                     // 编译web下组件模板
-│   └── webpackconfig.ts                    // 编译webpack
-├── tpl                                     // 编译模板
-│   ├── build                               // webpack模板文件
-│   │   ├── paths.js.nj
-│   │   ├── util.js.nj
-│   │   ├── webpack.config.base.js.nj
-│   │   ├── webpack.config.client.js.nj
-│   │   └── webpack.config.server.js.nj
-│   ├── package.json.nj                     // package.json模板文件
-│   └── web                                 // web下 组件模板(参考路径必须和example中路径一致才可以编译生效)
-│       ├── assets
-│       ├── layout
-│       └── page
-├── tsconfig.json                           // ts编译选项
-└── types                                   // 编译类型
 
-```
+# Guide
+
+更详细的使用说明请查看[官方文档](http://ykfe.net)
diff --git a/packages/yk-cli/help.txt b/packages/yk-cli/help.txt