react-app-shell/README.md

react打包脚本和example, 这里的版本请忽略

## loki

### 1. 命名由来
1. 漫威电影宇宙 阿斯加德的小公主 `洛基`, 诡计之神, 亦正亦邪       

### 2. 说明
1. loki 是在 `create-react-app@3.0.1 / react-scripts` 的基础上进行的二次开发.
2. 调整如下
    1. 添加了自定义配置文件 'loki.config.js', 参考 `/example/loki.config.js`
    2. 配置文件 暴露了配置项, 比如: platform, webpack别名配置, babel配置, 及静态资源cdn配置
    3. 统一配置了babel, 同时暴露了babel配置, 支持添加babel插件 
    4. 支持了 less
    5. 移动端项目 自动添加 px 到 rem 的插件进行转换
    6. 生产环境开启打包 gzip 
    7. 调整了代码块的分割 splitChunks 
   
3. 目的: 统一前端项目打包脚本, 方便维护与升级

### 3. 本地开发
1. 因为使用了yarn的`workspaces`功能, 所以在根目录下运行命令 `yarn` 即可安装所有项目的依赖, 注意: 不要用`npm install`
2. 符号链接, 在 `/loki-scripts/` 目录下使用 `yarn link`,  在测试项目 `/example/` 使用 `yarn link "xxxx" `, 注意: 不要用 `npm link`, 会污染全局环境, `yarn link` 则不会
   
    ```
    # 1. 这个命令在你想链接的包里运行
    $ cd loki-scripts
    $ yarn link
    
    # 2. 测试项目中运行
    $ cd example
    $ yarn link "loki-scripts"
    
    # 3. 启动 或 打包脚本
    $ loki start # 开发模式
    $ loki build # 构建模式
    
    # 4. 发布测试版本
    $ npm run alpha
    
    # 5. 发布正式版本
    $ npm run upload
    ```

### 4. 测试版本与升级
1. 测试版本, alpha 至少有一个版本经过验证并上线后, 才能发布正式版本
    1. 约定格式: `{ version : '1.0.4-alpha.1' }`
    2. 发布脚本: `npm run alpha`
    3. 安装测试版本: `yarn add loki-scripts@alpha`

2. 正式版本
    1. 约定格式: `{ version : '1.0.4' }`
    2. 发布脚本: `npm run upload`
    3. 安装测试版本: `yarn add loki-scripts`


### 5. 项目使用的正确姿势
1. 设置私有仓库
2. 安装依赖, `yarn add loki-scripts -D`, 

3. 在根目录添加配置文件 `loki.config.js`, 参考下面代码. 注意: 配置了`resourcePath`的环境, 生成的文件目录 没有`static`文件夹, jenkins配置的时候需要注意

    ```js
    const path = require('path');
    
    module.exports = {
      /**
       * 平台, 默认pc, 可选值: pc, h5
       * pc, 不处理px 到  rem 的转换
       * mobile, 会添加 px 和 rem 转换
       */
      platform: 'mobile',
      /**
       * 别名
       * 如何对编辑器友好，详见下面👇
       */
      alias: {
        '@': path.resolve(process.cwd(), 'src'),
      },
      /**
       * 静态资源路径, 配置了资源, 则需要手动在html模板里注入js和css
       * 否则css和js自动注入到html模板
       * '', cdn域名+目录
       */
      resourcePath: {
        /**
         * 测试环境
         * 使用cdn, 域名+路径 '' 作为路径前缀
         */
        staging: {
          staticPath: "https://static-staging.cn/shop/",
          imgPath: "https://img-stagin.cn/shop/",
          mediaPath: "https://media-staging.cn/shop/"
        },
        /**
         * 生产环境
         * 使用cdn, 域名+路径 'https://static.cn/shop/' 作为路径前缀
         */
        production: {
          staticPath: "https://static.cn/shop/",
          imgPath: "https://img.cn/shop/",
          mediaPath: "https://media.cn/shop/"
        }
      },
      /**
       * babel配置
       */
      babelConfig: {
        plugins: [
          // [
          //   "import",
          //   {
          //     "libraryName": "antd-mobile",
          //     "style": "css"
          //   }
          // ],
        ],
      },
    };


    ```
    
4. 添加scripts, 其中 `PUBLIC_URL=/shop` 表示设置的二级目录, `GENERATE_SOURCEMAP=false` 表示不生成sourceMap
    1. 开发: `loki start`
    2. 打包: `cross-env NODE_ENV=dev loki build`
    3. 打包: `cross-env NODE_ENV=staging PUBLIC_URL=/shop loki build`
    4. 打包: `cross-env NODE_ENV=production PUBLIC_URL=/shop GENERATE_SOURCEMAP=false loki build`

5. 在根目录添加 目标浏览器 配置文件 `.browserslistrc`, 默认是所有环境都生效

    ```
    >1%
    last 2 versions
    Firefox ESR
    safari >= 3
    ios >= 7
    android >= 4.0
    not ie < 9
    ```
6. 别名相关, 比如: `import a from '@/a' `
    
    1. TypeScript项目 添加别名，参考以下代码。 webstorm和vscode编辑均能自动识别该配置
       ```
        // tsconfig.json
        {
          // ...其他配置
          "extends": "./paths.json"
        }

        // paths.json
        {
          "compilerOptions": {
            "baseUrl": ".",
            "paths": {
              "@/*": ["src/*"]
            }
          }
        }
       ```
       
    2. javascript项目添加别名，只需在`loki.config.js`中配置即可。但还需如下配置，编辑才能识别别名路径。

        ```
           // webstorm 编辑器, 根目录下，添加system.js文件，内容如下：
           System.config({
               "paths": {
                   "@/*": "./src/*"
               }
           });
           
           // vscode 编辑器, 根目录下，添加jsconfig.json，内容如下
           {
             "compilerOptions": {
               "baseUrl": "src",
               "paths": {
                 "@/*": ["src/*"]
               },
               "target": "ES6",
               "module": "commonjs",
               "allowSyntheticDefaultImports": true,
               "experimentalDecorators": true
             },
             "include": [
               "src/**/*"
             ],
             "exclude": [
               "node_modules"
             ]
           }
           
         ```

7. jenkins配置相关
    1. B端一般不涉及到CDN配置, jenkins配置方式不变
    2. C端如果要支持cdn, `loki.config.js` 需要配置 `resourcePath`, 注意打包生成的目录 没有 'static' 文件夹
    
    ```bash
    
    # 其他配置...
    
    ossutil64 cp -f -r build/js oss://fe-static-staging/activity/js
    ossutil64 cp -f -r build/css oss://fe-static-staging/activity/css
    ossutil64 cp -f -r build/img oss://fe-static-staging/activity/img
    ossutil64 cp -f -r build/media oss://fe-static-staging/activity/media
    
    # 其他配置...
    
    ```