npm 抽取 解析(持续更新中)

发布时间:2023年12月30日

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

文章来源:https://blog.csdn.net/weixin_49307011/article/details/135205437
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。