在一次開發中，小李接到一個重要的任務：將 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 文件，開始編寫他的時間選擇器組件：

<!-- src/ByDatePicker/index.vue -->
<template><el-date-picker v-model="timeValue" />
</template><script setup name="ByDataPicker">
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);}
);
</script><style lang="scss" scoped></style>

小提示：記得組件中使用ref watch等關鍵字一定要進行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 上，團隊的小伙伴們興高采烈地開始使用這個新工具，開發效率大大提升！