如何在 npm 上发布 Element Plus 二次封装组件

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

1. 初始化 npm 包

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

bash 复制代码

npm init

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

2. 安装 Vue 3 和 Element Plus

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

bash 复制代码

npm install vue
npm install element-plus

3. 创建组件

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

vue3 复制代码

<!-- 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 文件：

javascript 复制代码

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

export default ByDatePicker;

5. 添加构建工具

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

5.1 安装 Vite

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

bash 复制代码

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

5.2 创建 Vite 配置文件

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

javascript 复制代码

// 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 中添加构建脚本：

json 复制代码

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

7.构建组件

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

bash 复制代码

npm run build

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

8.更新 package.json

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 注册了账号，并使用命令登录：

bash 复制代码

npm login

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

bash 复制代码

npm publish --access public

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

.npmrc 文件内容

ini 复制代码

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

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