koot v1 beta 开发进度

❗ 优先项
❕ 次级优先项
❔ 需讨论

核心

[ ] 所有命令终止时清除本次生成的临时文件，如项目配置文件、flag文件等
- 参考 lerna
[ ] 添加特征标识符
[ ] 爬虫：识别特征标识符，统级使用 koot 的公开站点

核心 `处理配置`

[x] 整合配置模式 koot.config.js
配置项
- [x] 默认使用的 webpack 插件、loader 的配置扩展
- less: modifyVars
- [ ] 切换语言的 URL 参数 (默认: hl)
- [x] CSS 定名规则
- [x] ~~改为 global 和 module~~
- [x] 仅保留 module
- [x] ~~需要抽出 CSS 文件的文件名规则~~
- [x] ~~开发模式默认启用 SPA~~
- [ ] 服务器运行文件部分内容可配置 (npm install)
- [ ] 服务器运行的 package.json 改为扩展，而非目前的无条件覆盖
- [ ] 客户端打包结果二级目录名和对应的 publicPath (当前默认 includes)
- [x] 支持 react-router 的 basename 机制 (https://stackoverflow.com/questions/42181889/how-to-configure-a-basename-in-react-router-3-x)
- 类似启动端口，支持环境变量
- [x] client 的 history 类型设置
- [x] webpack.devServer
- [x] 重新整理所有配置项的默认值
- [x] 无默认值/需要设定的配置项，如果没有设定，在 validate 阶段直接报错
- [x] 根据整理的默认值，清理模板项目的配置文件
- [x] 允许项目不传入 webpack 配置
- [x] port -> server.port & devServer.port

核心 `打包`

[x] ❔ 定期清除 webpack 配置文件 log
- [x] 仅保留最近 n 次 log
[ ] 插件报错时的处理
chunkmap
- [ ] .files 下的内容变为 Array
- [ ] 相关读取方法支持 Array
[ ] koot-style-loader
- 取代 style-loader 和 sp-css-loader
- [x] 弃用 CSS 命名规则，所有 CSS 文件采用统一 loader 方案
- 参考 css-loader 的 module 做法：https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/
[x] 临时项目配置文件挪入 /logs/build/

核心 `生产模式`

报错
- [x] ❗ 端口被占用
[ ] 允许打出开发模式版本的包
[x] 打包结果自动清理机制

核心 `开发模式`

[x] 优化错误报告机制
[x] ~~启动进程时检查是否存在已有进程，如果有，尝试 kill~~
[x] ~~❗ webpack dev server 端口可配置~~
[x] ❗ webpack dev server 端口在没有指定时随机指定
[ ] 优化终止进程的做法 (可参考 lerna)
报错
- [x] ❗ 服务器端端口被占用
- [x] ~~❗ webpack dev server 端口被占用~~
[ ] ❔ 弃用 pm2 方式
[ ] 优化 log
- 仅显示简约必要的信息，如
- 正在启动开发模式 (当前步骤 1/5: 生成DLL)
- 开发模式已启动 @ localhost:8080
- 检测到文件修改，正在实施热更新...
主代理进程
- [ ] 目标服务器仍在启动/重启时，调整报错信息，并自动恢复
[x] 默认使用临时目录作为打包结果路径
[ ] dll 永驻 (/logs/dev/)

通用 `PWA`

[ ] 根据配置信息自动生成 manifest.json
service-worker
- [ ] 选项：仅缓存静态资源（忽略其他请求）
- [ ] 图片请求失败时返回404图片 (https://bitsofco.de/handling-broken-images-with-service-worker/)

通用 `sp-css-loader`

[x] ~~❔ 文件内不包含 .component 或 .[name]__component 时，不做特殊处理~~

通用 `sp-css-import`

[x] 更新至 v0.6 新版的结果

通用 `koot-cli`

[x] koot-upgrade 升级项目到 v0.7 时，自动添加兼容旧结果的 css 规则
[x] 优先处理 koot.config.js 再处理 koot.build.js

通用 `i18n`

[ ] URL上的语言字段无论大小写均可匹配到对应语言包
[ ] redux 模式转义文本 (部分语种的文字在内存中失效)
[ ] URL上制定的语种ID不存在时的逻辑

React

模板
- [x] ❗ pathname([filename])
- [x] ❗ content([filename])
- [x] ❗ styles 和 scripts 注入项：如果模板中没有有关 critical 的指定注入项，默认注入 critical 的相关内容，反之不进行该操作 (#13)
[ ] 支持传入 <Root />
注入
- [ ] manifest
Redux
- [x] action 定名规范 (#19 )
extend()
- [x] 需要 Promise 的场合做兼容处理：如果是 Array 处理为 Promise.all()，如果不是 Promise 做同步运行
- [ ] data / data.fetch 返回值如果不是 Promise、Array 或 Boolean，给出正确的错误提示
[x] 根层加入 componentDidCatch()
[x] ~~弃用默认的 critical 用法，相关逻辑改到 client.before 中~~
- [x] ~~client.before 的代码结果要输出到 <head> 中~~
Redux
- [ ] 移除 realtimeLocation
- [ ] 在 routing 中加入 Boolean isChanging

React `同构`

[x] ❕ 缓存同构结果
[x] ~~minify 同构结果~~
[x] koa-static 匹配后应不执行之后的中间件
- ❔ 升级 koa-static
- [x] 挂载 2 个 koa-static 中间件，分别处理打包结果和其他静态资源
错误处理
- [ ] 服务器端 React 执行发生错误：渲染根层为空的类 SPA 结果，并在 console.log 中写出详细错误
- 考虑在服务器端的根层组件上应用 componentDidCatch
同步 Cookie 到 store
- [x] 支持自动同步所有 Cookie (redux.syncCookie = true)
- [x] 支持不同步的选项 (redux.syncCookie = false)
- [x] 结果中存在 cookie 原始值
[x] 重写同构流程
- [x] ❔ 先打包React代码，服务器 eval() 这部分代码实现部分变量提升
- [x] ❔ 重新考虑 store history localeId 使用方式
- ❔ 各端使用统一全局变量对象 koot

React `SPA`

[ ] 启用 i18n
- [ ] ❔ 如何处理
[ ] index.html 中加入首页同构 HTML 代码

测试

[ ] ❕ 测试项目 (#18)

原计划表

## 开发进度 #### 通用 - [x] 环境变量的三重优先原则 - 报错 - [x] 端口被占用 - [x] 启动服务器 - [x] 启动dev server - [x] 改名，备选： - `Kato` - `Koot` #### 打包 - [x] 更改 koot.build.js 格式 - 特殊入口 - [x] `client` - [x] `critical` - [x] `service-worker` 生成时忽略该出口 - [x] `polyfill` - [x] `service-worker` 生成时忽略该出口 - Webpack插件 - [x] 回调：开发模式打包后 - [x] 重写/优化 `enter.js` - [x] 整合 `koot.js` 和 `koot.build.js` - 启动时生成现有的 `koot.js` 格式的文件 - [x] 启用 `babel-loader` 缓存 #### 配置文件 - [x] 修改 `webpack` 的 loader 和 plugin 的配置 #### i18n - [x] 流程重写：支持直接打包模式 - [x] 开发模式：更新语言包文件时重新打包 - [x] 替换 `Object` 改为暂存形式 #### 相关log - [x] 开发环境：相关回调方法 log - 打包/build - [x] `before()` - [x] `after()` - client - [x] `before()` - [x] `after()` - [x] `onRouterUpdate()` - [x] `onHistoryUpdate()` - server - [x] `before()` - [x] `after()` - [x] `onRender()` - 端口冲突提示 - [x] 生产环境：服务器端口 - [x] 开发环境：服务器端口 - [x] 开发环境：`webpack-dev-server` 端口 #### 命令 - [x] `koot-build` - [x] `koot-dev` - [x] `--no-open` - [x] 等待服务器启动，而非服务器打包完毕 - [x] `--global`：挂载到全局 pm2 上 - [x] 无设定时随机端口 - [x] 可设定 `webpack-dev-server` 端口 - [x] `koot-analyze` - [x] `koot-start` - [x] `--no-build` #### 注入 / 模板 - [x] 重写模板读取和注入方式，支持 `.ejs` - 特殊注入 - [x] `htmlLang` - [x] `title` - [x] `metas` - [x] 多语言启用时相关的跳转 meta (https://support.google.com/webmasters/answer/189077?hl=en) - [x] `styles` - [x] `critical.css` - [x] 将 `critical` 移出，改用 `filecontent` 方式 - [x] 同构CSS - [x] `scripts` - [x] `redux store` - [x] `polyfill` - [x] `critical` - [x] 将 `critical` 移出，改用 `filecontent` 方式 - [x] 默认入口 - [x] PWA 自动注册 service-worker - [x] `manifest` - [x] `pathname::[filename]` - [x] `filecontent::[filename]` - [x] 有关 `metas` 的基础方案 - [x] `page-info()` - [x] minify #### 全局暴露 - [x] `store` - [x] `history` - [x] `localeId` - [x] `@pageinfo()` - [x] `stage` - [x] `env` - [x] `@load()` #### boilerplate - [x] 在基础 webpack 配置文件中以注释标明特殊入口 - [x] manifest - [x] `prettier` #### CLI - [x] 重写 #### `css-loader` - [x] 文件中不存在 `.component` 时，不做 class 名处理 - [x] 移至主包 / 改名 #### `@pageinfo()` - [x] 浏览器环境修改 metas：初次载入不修改，以保证和服务器结果一致 #### `@load()` - [x] 开发完成 - 考虑使用组件？ #### PWA / service-worker - [x] 自动生成 `manifest` - [x] 请求超过一定时间后，强制返回缓存结果 - [x] 选项：仅缓存静态资源（忽略其他请求） #### React - 组件静态方法优化 - [x] 不再要求必须连接 Redux - [x] 方法名通过 `webpackDefinePlugin` 定义 - 同构 - [x] 针对 `react` v16.3 中 `context` 的调整 - [x] 缓存机制 - SPA - [x] `index.html` 中加入同构结果 - `extend` - `styles` - [x] 开发模式：`[filename]-[dir]-[hash]` #### 开发模式 - [x] 根据请求替换 `localhost:3001` - [x] hot-reload #### 其他 - [x] 自动复制静态文件 ## CLI 流程 1. 填写：项目名 2. 填写：项目介绍 3. 填写：作者email 4. 选择：基础框架 (react) 5. 选择：项目模式 (同构 | SPA | SPA+服务器|Static|H5) 6. 选择：是否启用多语言 (on) 7. 填写：打包结果目录 (./dist) 8. 下载：对应的 boilerplate 9. 创建 - manifest - koot.build.js - (多语言启用时) 语言包 10. 显示：后续操作指引

cmux / koot