react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
208 lines (174 loc) • 6.46 kB
Markdown
## 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
# 其他配置...
```