实用指南：如何在 npm 上发布 Element Plus 二次封装组件

在一次开发中，小李接到一个重要的任务：将 Element Plus 中的时间组件根据团队的独特需求进行二次封装。他灵机一动，决定将这个自定义组件打包成一个 npm 包，以便团队的其他小伙伴们可以快速、方便地使用。接下来，让我们跟随小李的脚步，一同探索这个令人兴奋的过程吧！

1. 初始化 npm 包

小李首先在一个干净的文件夹中初始化项目。命令行窗口里，他轻松输入：

npm init

根据提示填写包的名称、版本和描述，最终生成了一个 package.json 文件。

2. 安装 Vue 3 和 Element Plus

为了让组件有强大的动力，小李开始安装 Vue 3 和 Element Plus：

npm install vue
npm install element-plus

3. 创建组件

接下来，小李在项目文件夹中创建一个 src 目录，并在其中新建一个 index.vue 文件，开始编写他的时间选择器组件：

import { ref, watch } from "vue";
const props = defineProps({
startTime: {
type: String,
default: "",
},
stopTime: {
type: String,
default: "",
},
});
const emit = defineEmits(["update:startTime", "update:stopTime"]);
const timeValue = ref([]);
const install = () => {
let data = [props.startTime || "", props.stopTime || ""];
timeValue.value = data;
let start = data[0];
let stop = data[1];
emit("update:startTime", start);
emit("update:stopTime", stop);
};
install();
//监听外部传递进来的的数据变化
watch(
() => props.startTime,
() => {
install();
}
);
//监听数据变化
watch(
() => timeValue.value,
(val) => {
if (!val || val === null || val === "") {
val = ["", ""];
}
let start = val[0];
let stop = val[1];
emit("update:startTime", start);
emit("update:stopTime", stop);
}
);

小提示：记得组件中使用refwatch等关键字一定要进行import引入，否则打包后可就要报错了哦！

4.配置入口文件

为了让其他人能够轻松导入这个组件，小李在 src 目录下创建了一个 index.js 文件：

// src/index.js
import ByDatePicker from "./ByDatePicker/index.vue";
export default ByDatePicker;

5. 添加构建工具

小李想要将组件打包成可以在其他项目中使用的格式，决定采用 Vite 作为构建工具。

5.1 安装 Vite

他快速安装vite和@vitejs/plugin-vue 插件：

npm install --save-dev vite @vitejs/plugin-vue

5.2 创建 Vite 配置文件

小李又新建了一个 vite.config.js 文件，配置如下：

// vite.config.js
import { defineConfig
} from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: "src/index.js",
name: "ByDatePicker",
fileName: (format) =>
`by-date-picker.${format
}.js`,
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ["vue", "element-plus"],
output: {
globals: {
vue: "Vue",
"element-plus": "ElementPlus",
},
},
},
},
});

6.添加构建脚本

在 package.json 中添加构建脚本：

"scripts": {
"build": "vite build"
}

7.构建组件

终于，小李可以运行构建命令，生成编译后的组件代码：

npm run build

编译完成后，dist 目录中将出现他的杰作，闪闪发光！

8.更新 package.json

{
"name": "by-date-picker",
"version": "1.0.0",//每次发布前都需要更新版本号否则发布不成功
"main": "dist/by-date-picker.umd.js",
"module": "dist/by-date-picker.es.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "vite build"
},
"dependencies": {
"element-plus": "^2.10.4",
"vue": "^3.5.18"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.4",
"vite": "^6.3.5"
}
}

9.发布到 npm

最后，小李确保自己已经在 npm 注册了账号，并使用命令登录：

npm login

然后他自信地发布自己的包：

npm publish --access public

小提示：如果你更改了npm的镜像源，记得添加一个 .npmrc 文件，确保你的发布顺利无阻。

.npmrc 文件内容

registry=https://registry.npmjs.org/

经过这一系列步骤，小李终于成功将他的组件发布到了 npm 上，团队的小伙伴们兴高采烈地开始使用这个新工具，开发效率大大提升！