npm 抽取 解析（持续更新中）
1、boot
ConfigMap
1、构建时注入
ne run dev -e JEEP_URL=jiang111,ALFA_URL=yunjin222
2、在 package.json 中写入
在项目的 package.json 文件中，可以添加特定的键来配置环境变量，这些配置会在运行 ne 命令时自动注入。
- ne-env-[command]：这是一个对象，用于指定在特定命令下需要注入的环境变量，例如：
"ne-env-dev": {
"NODE_SYS": "dealer"
}
3、在eggjs为基础的后端工程中
注入 Egg.js 启动参数
ne run dev --senv port=7002
ne-senv-[command]：与 ne-env 类似，但只在以 Egg.js 为基础的后端工程中有效，例如：
"ne-senv-dev": {
"port": "7002"
}
4、扩展
Egg.js 是一个基于 Node.js 的后端开发框架，旨在帮助开发者更高效地构建企业级应用。所以，当文档提到 "ne-senv" 只在 Egg.js 后端工程中有效时，意思是在使用 Egg.js 框架构建的后端应用中，可以通过该方式注入环境变量。
fs： bin/ne
主要目的： 运行后CMD中需要执行的命令
cmdObj === ：
"dashboard": {"dev": "cross-env NODE_ENV=development $env$ node server/server.js","build": "cross-env $env$ ne-webpack -c vue_dashboard"}, "h5": {"dev": "cross-env NODE_ENV=development $env$ node server/server.js","build": "cross-env $env$ ne-webpack -c vue_h5","startup:docker": "pm2-docker start startup.json" }
通过pkg.name 来决定是 h5、b端、还是服务端 --- projectType
command 是run 后面的命令，例如 dev、build、lint
options 是环境变量，详情请看上一小节；
const envArr1 = options.parent.env.split(',');const snykReg = new RegExp('\\$snyk-token\\$', 'ig');cmdObj[ projectType ][ command ] = cmdObj[ projectType ][ command ].replace(snykReg, envArr1[i]);
commander
创建命令行命令和选项：commander 允许你定义和注册命令行命令和选项。你可以轻松地定义程序支持的各种命令和参数，从而实现丰富的命令行功能。处理命令行参数：通过 commander，你可以轻松地解析用户在命令行中输入的参数，包括选项和参数值。它支持解析长选项（例如 --verbose）和短选项（例如 -v）。生成帮助信息：commander 可以自动生成清晰的帮助文档，以便用户了解如何正确使用你的命令行工具。帮助文档会列出支持的命令、选项和参数，并提供说明和示例。嵌套子命令：commander 支持创建带有子命令的命令行工具，这样你可以更好地组织和管理复杂的命令集合。例如，你可以创建一个主命令，然后为该命令添加多个子命令。事件处理：你可以通过监听事件的方式处理特定的命令行事件，例如解析选项后触发的事件。自定义输出：你可以自定义输出格式，包括错误消息、提示信息和其他文本。
是一个强大且灵活的工具，可用于创建具有交互性和易用性的命令行界面，适用于构建各种类型的命令行工具和实用程序。
2、nginx-cache
Params
// 第一参数 === ['/webapp']
// 第二参数 === webpack相关配置、
// 第三个参数是回调函数
Enter
if (webpackConfig) { // 本地构建 npm run dev
const koaWebpack = require('koa-webpack');
// 使用 koa-webpack 模块创建处理 webpack 的中间件，并添加到中间件数组中。
koaWebpack({ config: webpackConfig }).then(webpackHandler => {
middleware.push(webpackHandler);});} else { // 生产构建 npm run build
const indexHandler = async (ctx, next) => {if (ctx.path === '/') {
callback && callback(ctx); // 调用回调函数。if (!ctx.body) { // 如果响应体为空。
ctx.path = '/index.html';// 发送 index.html 文件作为响应。
await send(ctx, ctx.path, { root: staticPath[0] });}} else {
await next(); // 调用下一个中间件。}};
middleware.push(indexHandler)}
koa-static-cache
该组件主要是设置静态文件的缓存、gzip、接口错误处理等；
const koaStaticCache = require('koa-static-cache')if (typeof item === 'string') {
staticCache = koaStaticCache(item, {
maxAge: 365 * 24 * 60 * 60, // 缓存的最大时间，以秒为单位。
gzip: true, // 是否启用 Gzip 压缩。
usePrecompiledGzip: true, // 是否使用预编译的 Gzip 文件。
dynamic: true, // 是否支持动态更新缓存。});}
此部分主要依赖koaStaticCache设置缓存与开启Gzip；if (err == 'Error: login is required') {
ctx.status = 401;
ctx.body = 'login is required';} else {
assert.ifError(err); // 使用 assert 来断言没有错误发生。}
3、nginx-proxy
单一职责：http-proxy
const proxyServer = HttpProxy.createProxyServer();proxyServer.web(ctx.req, ctx.res, options, e => {
const status = {
ECONNRESET: 502,
ECONNREFUSED: 503,
ETIMEOUT: 504,}[ e.code ];if (status) ctx.status = status;if (this.options.handleError) {
this.options.handleError.call(null, {
e, req: ctx.req, res: ctx.res });}
resolve();});
4、webpack
原始系列
"webpack": "4.35.3",
"webpack-cli": "^3.3.6",
"webpack-merge": "^4.2.1"
最新版本：
"@vue/cli-service": "~5.0.0" // 使用的是 Webpack 5。 Vue CLI 使用 Vue CLI Service 来管理构建和开发流程，其中包括了对不同模块的配置读取和整合。Vue CLI 会主动读取项目根目录下的 vue.config.js 文件，以获取项目的自定义配置信息，例如自定义的 Webpack 配置、代理设置、插件配置等。
优化系列
代码进行了压缩，生产环境去除console；
进行了图片压缩， 生产构建的时候生成gzip文件；
js与css进行代码分割处理；
减小外部依赖包的体积，引用外部依赖；
- Vendors 文件忽略外部依赖；
- Main 文件进行再次分割；
- 解决图片压缩后访问不到的问题；
- npm抽取之后压缩并只上传构建的内容；webpack最好也压缩s