fix: 项目打包构建流程优化 & 补充说明

This commit is contained in:
GraceWalk
2022-09-13 11:43:30 +08:00
parent 2e016800e0
commit 4efe35dd51
16 changed files with 37265 additions and 65 deletions

View File

@@ -9,6 +9,5 @@ build/
coverage coverage
versions/ versions/
debug.log debug.log
package-lock.json
yarn.lock yarn.lock
target target

View File

@@ -1,43 +1,60 @@
## 安装项目依赖 ## 前提
- 安装 lerna 正常情况下,您应该通过 [本地源码启动手册](https://github.com/didi/KnowStreaming/blob/master/docs/dev_guide/%E6%9C%AC%E5%9C%B0%E6%BA%90%E7%A0%81%E5%90%AF%E5%8A%A8%E6%89%8B%E5%86%8C.md) 来打包工程。如果您有需要在本地独立启动前端服务,请参考以下手册。
在进行以下的步骤之前,首先确保您已经安装了 `node`。如已安装,可以通过在终端执行 `node -v` 来获取到 node 版本,项目推荐使用 `node v12` 版本运行。
另外,`windows` 用户请在 `git bash` 下运行下面的命令。
## 一、安装项目依赖(必须)
1. 安装 lerna可选安装后可以直接通过 lerna 的全局指令管理项目,如果不了解 lerna 可以不安装)
``` ```
npm install -g lerna npm install -g lerna
``` ```
- 安装项目依赖 2. 安装项目依赖
``` ```
npm run i npm run i
``` ```
## 启动项目 我们默认保留了 `package-lock.json` 文件,以防止可能的依赖包自动升级导致的问题。依赖默认会通过 `https://registry.npmjs.org` 服务下载,如果您无法连通该服务器,请删除当前目录及 `packages/*` 子目录下的 `package-lock.json` 后,在当前目录下使用 `node v12` 版本执行命令 `npm run i`
## 二、启动项目
``` ```
npm run start npm run start
``` ```
### 环境信息 该指令会启动 `packages` 目录下的所有应用,如果需要单独启动应用,其查看下方 QA。
http://localhost:port 多集群管理应用会启动在 http://localhost:8000系统管理应用会占用 http://localhost:8001。
请确认 `8000``8001` 端口没有被其他应用占用。
## 构建项目 后端本地服务启动在 http://localhost:8080请求通过 webpack dev server 代理访问 8080 端口,需要启动后端服务后才能正常请求接口。
如果启动失败,可以参见另外一种本地启动方式 [本地源码启动手册](https://github.com/didi/KnowStreaming/blob/master/docs/dev_guide/%E6%9C%AC%E5%9C%B0%E6%BA%90%E7%A0%81%E5%90%AF%E5%8A%A8%E6%89%8B%E5%86%8C.md)
## 三、构建项目
``` ```
npm run build npm run build
``` ```
项目构建成功后,会存放到 km-rest/src/main/resources/tamplates 目录下。
## 目录结构 ## 目录结构
- packages - packages
- layout-clusters-fe: 基座应用 & 多集群管理 - layout-clusters-fe: 基座应用 & 多集群管理(其余应用启动需要首先启动该应用)
- config-manager-fe: 子应用 - 系统管理 - config-manager-fe: 子应用 - 系统管理
- tool: 启动 & 打包脚本
- ... - ...
## 常见问题 ## 常见问题
Q: 执行 `npm run start` 时看不到应用构建和热加载过程? Q: `km-console` 目录下执行 `npm run start` 时看不到应用构建和热加载过程?如何启动单个应用?
A: 需要到具体的应用中执行 `npm run start`,例如 `cd packages/layout-clusters-fe` 后,执行 `npm run start` A: 需要到具体的应用中执行 `npm run start`,例如 `cd packages/layout-clusters-fe` 后,执行 `npm run start`

8567
km-console/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -17,15 +17,15 @@
"eslint-plugin-react": "7.22.0", "eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"husky": "4.3.7", "husky": "4.3.7",
"lerna": "^4.0.0", "lerna": "^5.5.0",
"lint-staged": "10.5.3", "lint-staged": "10.5.3",
"prettier": "2.3.2" "prettier": "2.3.2"
}, },
"scripts": { "scripts": {
"i": "npm install && lerna bootstrap", "i": "npm install && lerna bootstrap",
"clean": "rm -rf node_modules package-lock.json packages/*/node_modules packages/*/package-lock.json", "clean": "rm -rf node_modules package-lock.json packages/*/node_modules packages/*/package-lock.json",
"start": "sh ./tool/start.sh", "start": "lerna run start",
"build": "sh ./tool/build.sh", "build": "lerna run build",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"cm": "git add . && cz" "cm": "git add . && cz"
}, },

View File

@@ -9,5 +9,4 @@ build/
coverage coverage
versions/ versions/
debug.log debug.log
package-lock.json
yarn.lock yarn.lock

View File

@@ -1,6 +1,6 @@
## 使用说明 ## 使用说明
### 依赖安装: ### 依赖安装(如在 km-console 目录下执行 npm run i 安装过依赖,这步可以省略)
``` ```
npm install npm install
@@ -12,6 +12,8 @@ npm install
npm run start npm run start
``` ```
该应用为子应用,启动后需要到基座应用中查看(需要启动基座应用),地址为 http://localhost:8000
### 构建: ### 构建:
``` ```

File diff suppressed because it is too large Load Diff

View File

@@ -18,7 +18,7 @@
"scripts": { "scripts": {
"test": "echo \"Error: run tests from root\" && exit 1", "test": "echo \"Error: run tests from root\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server", "start": "cross-env NODE_ENV=development webpack-dev-server",
"build": "rm -rf ../../pub/layout & cross-env NODE_ENV=production webpack --max_old_space_size=8000" "build": "cross-env NODE_ENV=production webpack --max_old_space_size=8000"
}, },
"dependencies": { "dependencies": {
"babel-preset-react-app": "^10.0.0", "babel-preset-react-app": "^10.0.0",

View File

@@ -9,6 +9,5 @@ build/
coverage coverage
versions/ versions/
debug.log debug.log
package-lock.json
yarn.lock yarn.lock
.d1-workspace.json .d1-workspace.json

View File

@@ -1,6 +1,6 @@
## 使用说明 ## 使用说明
### 依赖安装: ### 依赖安装(如在 km-console 目录下执行 npm run i 安装过依赖,这步可以省略)
``` ```
npm install npm install
@@ -12,6 +12,8 @@ npm install
npm run start npm run start
``` ```
启动后访问地址为 http://localhost:8000
### 构建: ### 构建:
``` ```

File diff suppressed because it is too large Load Diff

View File

@@ -17,7 +17,7 @@
"scripts": { "scripts": {
"test": "echo \"Error: run tests from root\" && exit 1", "test": "echo \"Error: run tests from root\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server", "start": "cross-env NODE_ENV=development webpack-dev-server",
"build": "rm -rf ../../pub/layout & cross-env NODE_ENV=production webpack --max_old_space_size=8000" "build": "cross-env NODE_ENV=production webpack --max_old_space_size=8000"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [

View File

@@ -15,11 +15,13 @@ module.exports = merge(getWebpackCommonConfig(), {
layout: ['./src/index.tsx'], layout: ['./src/index.tsx'],
}, },
plugins: [ plugins: [
new CountPlugin({ isProd
pathname: 'knowdesign', ? new CountPlugin({
startCount: true, pathname: 'knowdesign',
isExportExcel: false, startCount: true,
}), isExportExcel: false,
})
: undefined,
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV), NODE_ENV: JSON.stringify(process.env.NODE_ENV),
@@ -53,7 +55,7 @@ module.exports = merge(getWebpackCommonConfig(), {
: [] : []
) )
), ),
], ].filter((p) => p),
output: { output: {
path: outPath, path: outPath,
publicPath: isProd ? process.env.PUBLIC_PATH + '/layout/' : '/', publicPath: isProd ? process.env.PUBLIC_PATH + '/layout/' : '/',
@@ -79,11 +81,11 @@ module.exports = merge(getWebpackCommonConfig(), {
proxy: { proxy: {
'/ks-km/api/v3': { '/ks-km/api/v3': {
changeOrigin: true, changeOrigin: true,
target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/', target: 'http://localhost:8080/',
}, },
'/logi-security/api/v1': { '/logi-security/api/v1': {
changeOrigin: true, changeOrigin: true,
target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/', target: 'http://localhost:8080/',
}, },
}, },
}, },

View File

@@ -30,19 +30,19 @@
<goal>install-node-and-npm</goal> <goal>install-node-and-npm</goal>
</goals> </goals>
<configuration> <configuration>
<nodeVersion>v12.20.0</nodeVersion> <nodeVersion>v12.22.12</nodeVersion>
<npmVersion>6.14.8</npmVersion> <npmVersion>6.14.16</npmVersion>
<nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot> <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
<npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot> <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
</configuration> </configuration>
</execution> </execution>
<execution> <execution>
<id>npm install</id> <id>npm run i</id>
<goals> <goals>
<goal>npm</goal> <goal>npm</goal>
</goals> </goals>
<configuration> <configuration>
<arguments>install</arguments> <arguments>run i</arguments>
</configuration> </configuration>
</execution> </execution>
<execution> <execution>

View File

@@ -1,16 +0,0 @@
#!/bin/sh
set -ex
#检测node版本
echo "node version: " `node -v`
echo "npm version: " `npm -v`
pwd=`pwd`
echo "start install"
# npm run clean
npm run i
echo "install success"
echo "start build"
rm -rf pub/
lerna run build
echo "build success"

View File

@@ -1,17 +0,0 @@
#!/bin/sh
set -ex
# rm -rf node_modules package-lock.json packages/*/node_modules packages/*/package-lock.json yarn.lock packages/*/yarn.lock
#检测node版本
echo "node version: " `node -v`
echo "npm version: " `npm -v`
pwd=`pwd`
echo "start develop"
npm run i
echo "本地开发请打开 http://localhost:8000"
lerna run start
echo "start success"