vue3组件库搭建并发布到npm保姆教程连载二

前言

接上次组件库搭建连载，主要介绍组件库的第三方依赖引入和一件打包发布脚本

引入第三方库(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挺麻烦的，并且还得每次记得版本号然后更新版本号，更麻烦，此时我觉得我们可以通过写脚本来节省我们的繁琐操作。
大致思路:

1. 对根目录下的package.json进行改造，加上发包属性
2. 然后通过node脚本来对根目录下的package.json的版本号进行升级
3. 然后再写一个修改根目录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