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进行代码分割处理；

减小外部依赖包的体积，引用外部依赖；

1. Vendors?文件忽略外部依赖；
2. Main?文件进行再次分割；
3. 解决图片压缩后访问不到的问题；
4. npm抽取之后压缩并只上传构建的内容；webpack最好也压缩s