前言
接上次组件库搭建连载，主要介绍组件库的第三方依赖引入和一件打包发布脚本
引入第三方库(ant-design-vue)
安装
pnpm install ant-design-vue -D
main.ts中引入
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
引入后就可以直接使用了，因为只是测试就没有搞按需引用，也可以按需引用
一键打包发布
因为我们打包后会在某个目录下生成打包文件并且清空之前的文件，所以我们每次都要重新生成一份package.json文件用来发包，但是每次都去运行npm init -y挺麻烦的，并且还得每次记得版本号然后更新版本号，更麻烦，此时我觉得我们可以通过写脚本来节省我们的繁琐操作。
大致思路:
- 对根目录下的package.json进行改造，加上发包属性
- 然后通过node脚本来对根目录下的package.json的版本号进行升级
- 然后再写一个修改根目录package.json的脚本文件，最后将修改后的文件写入到dist文件下
第一步配置package.json
修改属性为公共
"private": false,
添加代码
"type": "module",
"files": [
"dist"
],
"main": "cw-component.umd.ts",
"module": "cw-component.es.ts",
"exports": {
".": {
"import": "./cw-component.es.ts",
"require": "./cw-component.umd.ts"
}
},
最终代码
{
"name": "cw-component-test",
"private": false,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"type": "module",
"files": [
"dist"
],
"main": "cw-component.umd.ts",
"module": "cw-component.es.ts",
"exports": {
".": {
"import": "./cw-component.es.ts",
"require": "./cw-component.umd.ts"
}
},
"dependencies": {
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vue-tsc": "^1.0.11"
}
}
第二步编写一键更新版本号脚本
根目录下新建config文件夹，然后再文件夹下新增updateVersion.ts文件(js也行)
const fs = require("fs");
const path = require("path");
function resolve(dir) {
console.log(path.resolve(__dirname, "../", dir));
return path.resolve(__dirname, "../", dir);
}
// 读取配置文件，变量config的nom类型是Object类型
const config = require(resolve("package.json"));
console.log("process是--" + process.argv);
// node命令中的patch
const updateType = process.argv[2];
// 更新版本类型
const UPDATE_DICT = {
patch: "补丁",
minor: "小版本",
major: "大版本",
};
console.log("当前版本----------" + config.version);
console.log("更新类型: %s", UPDATE_DICT[updateType]);
const versionList = config.version.split(".");
if (updateType === "patch") {
versionList[2] = (Number(versionList[2]) + 1).toString();
} else if (updateType === "minor") {
versionList[1] = (Number(versionList[1]) + 1).toString();
versionList[2] = 0;
} else if (updateType === "major") {
versionList[0] = (Number(versionList[0]) + 1).toString();
versionList[1] = 0;
versionList[2] = 0;
}
config.version = versionList.join(".");
console.log(config.version);
// 更新文件
fs.writeFile(resolve("package.json"), JSON.stringify(config, null, 4), function (err) {
if (err) {
console.error(err);
} else {
console.log("----------修改全局package.json成功-------------");
}
});
第三步编写修改根目录package.json脚本
根目录下新建config文件夹，然后再文件夹下新增package.ts文件(js也行)
const fs = require("fs");
const path = require("path");
const processexec = require("child_process");
function resolve(dir) {
console.log(path.resolve(__dirname, "../", dir));
return path.resolve(__dirname, "../", dir);
}
// 读取配置文件，变量config的nom类型是Object类型
const config = require(resolve("package.json"));
delete config.module
delete config.exports
delete config.files
delete config.type
// 判断文件存不存在
if (fs.existsSync(resolve("dist/package.json"))) {
fs.unlink(resolve("dist/package.json"),
() => console.log("删除成功"));
} else {
console.log("文件不存在");
}
//将修改后的配置写入文件前需要先转成json字符串格式
const publishConfig = JSON.stringify(config, null, 4);
// 写到dist目录下
fs.writeFile(resolve("dist/package.json"), publishConfig, function (err) {
if (err) {
console.error(err);
} else {
console.log("----------写入dist目录成功-------------");
}
});
// 修改当前进程的目录，因为要到dist目录下publish
process.chdir(resolve("dist"));
// 执行 npm publish 命令
processexec.exec("npm publish", (error, stdout, stderr) => {
if (!error) {
// 成功
console.log(error);
console.log(stdout);
} else {
// 失败
console.log(error);
}
});
第四步配置script
更新小版本patch，更新其他版本可以将patch改成对应的参数
"build": "vue-tsc && vite build && node config/package.ts",
"patch": "node config/updateVersion.ts patch && npm run build"
最后运行npm run build
