react-app-shell v1.0.0

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配置的时候需要注意

   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' 文件夹

   # 其他配置...
   
   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
   
   # 其他配置...