ne?run?dev?-e?JEEP_URL=jiang111,ALFA_URL=yunjin222
在项目的?package.json?文件中,可以添加特定的键来配置环境变量,这些配置会在运行?ne?命令时自动注入。
"ne-env-dev":?{
??"NODE_SYS":?"dealer"
}
注入?Egg.js?启动参数
ne?run?dev?--senv?port=7002
ne-senv-[command]:与?ne-env?类似,但只在以?Egg.js?为基础的后端工程中有效,例如:
"ne-senv-dev":?{
??"port":?"7002"
}
Egg.js?是一个基于?Node.js?的后端开发框架,旨在帮助开发者更高效地构建企业级应用。所以,当文档提到?"ne-senv"?只在?Egg.js?后端工程中有效时,意思是在使用?Egg.js?框架构建的后端应用中,可以通过该方式注入环境变量。
主要目的:?运行后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,你可以轻松地解析用户在命令行中输入的参数,包括选项和参数值。它支持解析长选项(例如?--verbose)和短选项(例如?-v)。
生成帮助信息:commander?可以自动生成清晰的帮助文档,以便用户了解如何正确使用你的命令行工具。帮助文档会列出支持的命令、选项和参数,并提供说明和示例。
嵌套子命令:commander?支持创建带有子命令的命令行工具,这样你可以更好地组织和管理复杂的命令集合。例如,你可以创建一个主命令,然后为该命令添加多个子命令。
事件处理:你可以通过监听事件的方式处理特定的命令行事件,例如解析选项后触发的事件。
自定义输出:你可以自定义输出格式,包括错误消息、提示信息和其他文本。
是一个强大且灵活的工具,可用于创建具有交互性和易用性的命令行界面,适用于构建各种类型的命令行工具和实用程序。
//?第一参数?===?['/webapp']
//?第二参数?===?webpack相关配置、?
//?第三个参数是回调函数
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)}
该组件主要是设置静态文件的缓存、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?来断言没有错误发生。
}
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();
});
????"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进行代码分割处理;
减小外部依赖包的体积,引用外部依赖;