阅读 297

vue-cli3 项目优化之多项目共用配置、组件动态打包node命令

起因

前两天在做 vue 项目,有两个独立项目的需求中有很多交互和相似的需求, 实际项目最终可能会有很多的页面或者组件共用。但是又因为其中一些需求的特殊性,又不能把两个项目完全合并在一起。 于是百度了一番,整出了两个项目功用一套配置和公用组件,通过node命令控制预览、打包结果。 也有想过把公用组件部署到私有的cnpm上,但其中有很多还是涉及到公司业务方面的,我们私有cnpm的目的只是希望存储一些公用方法、前端封装组件等等,于是选择了通过node命令来控制。

解决方案

1. 创建命令文件

  • 在根目录中创建一个 scripts 文件夹
  • scripts 中创建 multiProjectConfig 多项目配置文件夹
  • multiProjectConfig 中新建 serve.js ,放置项目serve命令配置代码
  • multiProjectConfig 中新建 build.js ,放置项目build命令配置代码
  • multiProjectConfig 中新建 projectEnter.js ,放置项目入口配置代码以便项目中的其他文件使用
  • multiProjectConfig 中新建 projectPages.js ,放置项目根页面配置代码

serve.js

// process.argv 获取命令行参数
// 比如执行 `npm run serves WebApp DEV`
let projectName = process.argv[2]; // WebApp - 项目名
let env = process.argv[3]; // DEV - 环境配置

// 下面两行代码 获取projectName后把保存起来,写入到projectEnter.js里,方便项目中的其它文件里引入使用
let fs = require("fs");
fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`);

// 下面两行代码继续执行命令(npm run serve),执行默认命令开始进行预览
let exec = require("child_process").execSync;
exec("npm run serve:" + env, { stdio: "inherit" });
复制代码

build.js

// process.argv 获取命令行参数
// 比如执行 `npm run builds WebApp DEV`
let projectName = process.argv[2]; // WebApp - 项目名
let env = process.argv[3]; // DEV - 环境配置

// 下面两行代码 获取projectName后把保存起来,写入到projectEnter.js里,方便项目中的其它文件里引入使用
let fs = require("fs");
fs.writeFileSync("./scripts/multiProjectConfig/projectEnter.js", `exports.name = '${projectName}'`);

// 下面两行代码继续执行命令(npm run build),执行默认命令开始进行预览
let exec = require("child_process").execSync;
exec("npm run build:" + env, { stdio: "inherit" });
复制代码

这两个文件基本上差不多,如果极致甚至可以缩减成一个文件,也通过命令来控制 servebuild

projectPages.js

// 这个文件其实更简单了,通过获取当前项目名来区分根页面的路径
const projectName = require("./projectEnter");
const config = {
	WebApp: {
		name: "WebApp",
		pages: {
			index: {
				entry: "src/projects/WebApp/main.js",
				template: "public/index.html",
				filename: "index.html",
				title: "*****",
			},
		}
	},
	TodoList: {
		name: "TodoList",
		pages: {
			index: {
				entry: "src/projects/TodoList/main.js",
				template: "public/index.html",
				filename: "index.html",
				title: "*****",
			}
		}
	}
};

const configObj = config[projectName.name];
module.exports = configObj;
复制代码

上面这个文件最终是要在 vue.config.js 中使用的;

vue.config.js

//  vue.config.js
const path = require("path")
const multiProjectConfig = require("./scripts/multiProjectConfig/projectPages")
module.exports = {
	outputDir: "../../.." + pathBuild,
	publicPath: pathBuild,
	productionSourceMap: false,
	transpileDependencies: ["@cttq"],
	devServer: {
		host: "0.0.0.0",
	},
	pages: multiProjectConfig.pages,
	chainWebpack: (config) => {
		config.resolve.alias
			.set("@publicC", path.join(__dirname, "src/components"))
			.set("@publicA", path.join(__dirname, "src/assets"))
			.set("@", path.join(__dirname, "src/projects/WebApp"))
			.set("@assets", path.join(__dirname, "./src/projects/WebApp/assets"))
			.set("@components", path.join(__dirname, "./src/projects/WebApp/components"))
			.set("@plugins", path.join(__dirname, "./src/projects/WebApp/plugins"))
			.set("@style", path.join(__dirname, "./src/projects/WebApp/style"))
			.set("@utils", path.join(__dirname, "./src/projects/WebApp/utils"))
			.set("@img", path.join(__dirname, "./src/projects/WebApp/assets/images"))
	},
}
复制代码

2. 构建新的项目目录

简单一点贴张图...懒了懒了

这样就可以再不同的项目中使用共用的组件、静态资源或者什么其他你想要共用的东西

3. 修改package.json命令 serves、builds

"scripts": {
	"serve": "vue-cli-service serve",
	"serve:DEV": "vue-cli-service serve --mode DEV",
	"serve:QAS": "vue-cli-service serve --mode QAS",
	"serve:PRE": "vue-cli-service serve --mode PRE",
	"serve:PRD": "vue-cli-service serve --mode PRD",
	"build": "vue-cli-service build",
	"build:DEV": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --mode DEV --report",
	"build:QAS": "vue-cli-service build --mode QAS",
	"build:PRE": "vue-cli-service build --mode PRE",
	"build:PRD": "vue-cli-service build --mode PRD",
	"lint": "vue-cli-service lint",
	"new:comp": "node ./scripts/generateComponent/index",
	"new:view": "node ./scripts/generateView/index",
	"serves": "node ./scripts/multiProjectConfig/serve.js",
	"builds": "node ./scripts/multiProjectConfig/build.js"
},
复制代码

如此如此,这般这般,就可以在命令行中,通过node命令来控制需要调试、打包的项目和环境了; npm run serves WebApp DEV npm run builds TodoList DEV


以上就是多项目共用配置、组件动态打包node命令,请各位多指教。

关注下面的标签,发现更多相似文章
评论