NPM

Monorepo 是将多个相关项目的代码存储在同一个版本控制仓库中的软件开发策略。
包的定义：

示例结构：

my-project/
├── package.json (主 package.json)
├── packages/
│   ├── package-a/
│   │   └── package.json (package-a 的 package.json)
│   ├── package-b/
│   │   └── package.json (package-b 的 package.json)
│   └── package-c/
│       └── package.json (package-c 的 package.json)
└── shared/
    └── common-utils/
        └── package.json (common-utils 的 package.json)

前端项目 package.json 基本结构：

{  
"name": "frontend-project",  
"version": "1.0.0",  
"private": true,  
"scripts": {    // 前端特定的脚本命令  },  
"dependencies": {    // 前端运行时依赖  },  
"devDependencies": {    // 前端开发依赖  },  
"browserslist": [    // 浏览器兼容性配置  ]
}

后端项目 package.json 基本结构：

{  
"name": "backend-project",  
"version": "1.0.0",  
"description": "Backend project description",  
"main": "index.js",  
"scripts": {    // 后端特定的脚本命令  },  
"dependencies": {    // 后端运行时依赖  },  
"devDependencies": {    // 后端开发依赖  },  
"engines": {    // 指定 Node.js 版本要求  }
}
// 完全相同
npm i package-name
npm add package-name

//完全等价
npm install --save-dev package-name
npm i -D package-name
npm add -D package-name
npm install -D package-name

入口

开发环境和生产环境的入口文件：

Electron

Electron核心可以分成2个部分：主进程和渲染进程。
主进程连接着操作系统和渲染进程。渲染进程就是我们所熟悉前端环境了，只是载体改变了，从浏览器变成了windows。传统的Web环境我们是不能对用户的系统就行操作的，而Electron相当于Node环境，我们可以在项目里使用所有的node api。

相比web项目，桌面项目多了一个主进程，web项目资源相当于渲染进程。

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1600,    height: 1200  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
  createWindow()
  createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})

主进程 (Main Process): 整个文件中的所有代码都属于主进程。主进程是整个应用的入口点。主进程负责控制应用程序的生命周期、创建原生界面（如窗口）、处理系统级事件等。

渲染进程 (Renderer Process): 当 createWindow() 函数被调用，并且 win.loadFile('index.html') 执行时，会为每个创建的窗口启动一个新的渲染进程。

渲染进程实际上运行在 index.html 文件中。渲染进程负责显示用户界面，处理页面交互等。

Webpack

webpack.config.js / vue.config.js

Webpack：负责实际的热更新功能，包括编译、模块替换、与客户端的通信等。
package.json：提供了调用 Webpack 和开发服务器的脚本，简化了开发流程。

webpack:

devServer: {  
host: 'local.beacon.woa.com',  
https: true,  
headers: {   
'Access-Control-Allow-Origin': 'https://test.beacon.woa.com',   
'Access-Control-Allow-Credentials': 'true',  
}, 
}, // 在本地开发环境中配置开发服务器的 Access-Control-Allow-Origin 头，主要是为了模拟生产环境中的跨域请求行为。

CORS：

origin = protocol协议 + hostname主机名 + port端口号

protocol://hostname:port [https://example.com:443]

前端请求Origin：app://           Origin： 浏览器地址栏中 URL 的源（origin）部分。
后端：test.beacon.woa.com       Target： HTTP 请求的目标 URL
=> 跨域

Access-Control-Allow-Origin 头部由服务器设置，指明本服务器的资源可以由哪些origin合法访问

一般提供API和公共资源的服务器才设置 Access-Control-Allow-Origin ，而只托管网页的服务器不需要设置。

前端应用托管在 https://app.example.com
后端 API 在 https://api.example.com
那么 API 服务器应该设置：
Access-Control-Allow-Origin: https://app.example.com

excelin 的dev server配置了Access-Control-Allow-Origin头部，这个是因为子应用会被基座调用所以这样配置。(https://test.beacon.woa.com是基座)

package.json

"lodash": "^4.17.0”

"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDE..."
}