v3 notes

[Diablohu]

如无特殊说明，所有的 Function 均可为异步函数，在执行时会以 async 方式执行。

独立项目配置

// /super.js
module.exports = {
    // String，项目类型，无默认值，必须指定。目前支持 'react'。计划支持 'react-config' 'vue'
    type: 'react',

    // Boolean，是否为同构，默认为 false
    isomorphic: true,

    // String，项目源码根目录，无默认值，必须指定。可为绝对路径或相对于项目根目录的相对路径
    path: '/src/app1',

    // String，HTML基础模板，无默认值，必须指定。
    template: require('/src/app1/template'),

    // Object，路由配置，无默认值，同构时必须指定
    router: require('/src/app1/router'),

    // Object，Redux配置，无默认值，React同构时必须指定
    redux: {
        // 附加 reducer，与 combineReducers 参数语法相同
        combineReducers: {
            infos: require('/src/app1/redux/infos/reducer'),
            user: require('/src/app1/redux/user/reducer'),
        }
    },

    // Array，多语言配置，无默认值
    // 第一个语言为默认语言
    locales: [
        ['en', require('/src/app1/locales/en.json')],
        ['zh-cn', require('/src/app1/locales/zh-cn.json')],
        ['zh', require('/src/app1/locales/zh.json')],
    ],

    // Function || Object，客户端启动代码或配置，可不指定
    // client: require('/src/app1/client'), // 替代默认的客户端启动流程
    client: { // 扩展默认的启动流程
        // String，路由历史类型，支持 'browser' 'hash' 'memory'，同构时默认为 'browser'，其他情况默认为 'hash'
        history: 'browser',
        // Function，在启动前的回调
        beforeRun: require('/src/app1/client/before-run'),
        // Function，在启动后的回调
        afterRun: require('/src/app1/client/after-run'),
        // Function，在路由发生改变时的回调
        onRouterUpdate: require('/src/app1/client/on-router-update'),
        // Function，在浏览器历史发生改变时的回调
        onHistoryUpdate: require('/src/app1/client/on-history-update'),
    },

    // Function || Object，服务器端启动代码或配置，可不指定，非同构时忽略该配置
    // server: require('/src/app1/server'), // 替代默认的服务器端启动流程
    server: { // 扩展默认的启动流程
        // String || Number，服务器启动端口
        port: '3000',
        // Function，Koa App
        app: require('/src/app1/server/app'),
        // String，服务器侦听的域名，多项目同构时必须提供
        domain: 'web.com',
        // Object，注入内容
        inject: {
            critical_css: (() => __DEV__
                ? ''
                : `<style type="text/css">${getFileContent('critical.css')}</style>`
            )(),
        },
        // Function，在启动前的回调
        beforeRun: require('/src/app1/server/before-run'),
        // Function，在启动后的回调
        afterRun: require('/src/app1/server/after-run'),
        // Function，在渲染时的回调
        onRender: require('/src/app1/server/on-render'),
    },

    // Object，扩展默认webpack配置，参见下文
    // webpack: {} // 非同构时，只需要配置client模式
    webpack: {
        client: {},
        server: {},
    },

    // Object，PWA相关配置，参见下文
    pwa: { },
}

多项目配置

// /super.js
module.exports = [
    {
        // 单项目配置
    },
    {
        // 单项目配置
    },
]

Webpack配置

PWA配置

其他改动

• ImportStyle() 提供第二个参数，决定是否进行深度处理
• PWA配置不再采用 Webpack 插件形式，生成 service-worker 文件放在 Webpack 打包之后

[Diablohu]

HTML模板为 .html 或 .ejs inject方式修改为 HTML 注释

[dongwenxiao]

添加Unit Test eg:

• 方法测试 Jest
• UI测试

[Diablohu]

CSS处理方案

• https://www.styled-components.com/

[Diablohu]

配置文件中，所有以 ./ 为开始的字符串均被判定为相对路径，在相关处理环节中再进行引用

[Diablohu]

• /super.js 中只允许单配置不允许多配置
• 多配置可以采用以下方案
  • /super.1.js /super.app2.js
  • /super/1.js /super/app2.js

[Diablohu]

webpack

• plugins module.rules 如果 array 内第一个值为 true，则表明替换，否则为默认的追加模式

[dongwenxiao]

尝试默认在super-project包里带.babalerc 是否可以不在程序根目录添加。

[dongwenxiao]

服务端和客户端路由扩展

[dongwenxiao]

bluebird 尝试使用

[dongwenxiao]

建立以super-*的系列包。

[Diablohu]

i18n 写法举例

__('About')
__('time_now', { time: Date.now() })
__('header.nav.home')
__('header.nav', 'home')
__('header', 'nav.home')
__('header', 'nav', 'home')
__('header', 'nav', 'home', { key: 'value' })
__('header', 'nav', currentKey)
__('header', 'nav', currentKey, { key: 'value' })
__('header', key1, key2)

[dongwenxiao]

执行 yarn pm2:dev 时候 open browser 在server打包后执行。

[dongwenxiao]

根据不同的应用场景，切换class名字，是很常见的，可以出一个hoc用来配置。 例如： 1.client 端通用方法 wx|chrome|dingding|telegram 2.less做mixin，在模板项目里示例一下 省掉手写屏幕宽度

[dongwenxiao]

SSR时候，HTML每个片段的结构保证可以正常运行，加异常处理，不要因为个别出错影响HTML最终展示（jys项目，由于html问题，导致js没法正常加载）

[dongwenxiao]

发送请求可以封装一个公共方法，里面包含了服务端和客户端两种情况的特殊处理。 例如：服务端ssr请求不超过500ms，客户端不超过5000ms，请求的URL不同等配置。

[dongwenxiao]

onServerRenderStoreExtend 和 onServerRenderHtmlExtend 合并成 onServerRender