UNPKG

react-app-shell

Version:

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

208 lines (174 loc) 6.46 kB
## 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 # 其他配置... ```