关于NPM组件发布那些事儿

相信很多前端的小伙伴对npm并不陌生，也有很多小伙想将自己的组件或者插件也发布到npm上。小编本篇教程将以Vue3为🌰教会你如何轻松发布自己的组件。

step1 初始化项目

初始化一个Vue3项目，执行下面命令按照提示一步一步next就可以创建完成啦，这里不熟悉的小伙伴可以参考Vue官网手册

$ yarn create vue@latest

step2 封装组件

执行完上一步后就得到一个简单的Vue脚手架工程，在这里创建一些属于自己的组件。在本次的🌰中，我在📁components中创建了两个简单的组件，分别是app-toolbar和layout, 对于组件的功能并没有做过多的丰富，够用即可。

Step3 导出组件

在components目录中创建index文件，代码如下：

import type { App } from 'vue';
import * as components from './components';
import version from './version';
export * from './components';

export const install = function (app: App) {
  Object.keys(components).forEach(key => {
    const component = components[key];
    if (component.install) {
      app.use(component);
    }
  });
  return app;
};

export default {
  version,
  install,
};

Step4 编辑vite.config.js，配置build文件

entry：入口文件
name：库的名称，这里是 "@trionesdev-tdesign-vue-ext"。
fileName：定义输出文件命名规则。

具体配置可以参考vite的官网文档。

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    dts({
      include:"./components"
    }),
  ],
  base: './',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@trionesdev': fileURLToPath(new URL('./components/index.ts', import.meta.url)),
    },
    extensions: [".vue",'.js', '.json', '.ts', '.tsx'],
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: join(__dirname, './components/index.ts'),
      name: '@trionesdev-tdesign-vue-ext',
      fileName: (format) => `index.${format}.js`,
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
})

Step5 修改package.json文件

参考下面代码修改package.json

name: 项目的名称，应该是唯一的。
version: 项目的版本号，遵循语义化版本规则。
description: 项目的简要描述。
main: 指定项目的入口文件。
scripts: 自定义命令脚本，例如，你可以运行 npm start 启动应用。
keywords: 一组关键字，有助于其他人找到你的项目。
author: 作者的信息。
license: 项目的许可证，常见的包括 MIT、Apache-2.0、GPL-3.0 等。
repository: 指定项目的代码仓库信息，包括仓库类型和URL。
bugs: 定义问题跟踪系统的URL，以及可选的问题报告邮箱。
homepage: 项目的主页URL，通常是项目在代码托管平台上的页面

{
  "name": "@royxul/tdesign-vue-ext",
  "version": "0.0.2",
  "description": "triones_tdesign_vue",
  "type": "module",
  "main": "lib/index.umd.js",
  "module": "lib/index.es.js",
  "typings": "lib/index.d.ts",
  "directories": {
    "lib": "lib"
  },
  "files": [
    "lib",
    "components"
  ],
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "dev": "vite",
    "build": "yarn build:clean && yarn build:lib && yarn build:esm-bundle && rimraf lib/demo.html",
    "build:clean": "rimraf lib",
    "build:lib": "vue-cli-service build --target lib --name index --dest lib packages/index.ts",
    "build:esm-bundle": "rollup --config ./build/rollup.config.js",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@emotion/css": "^11.11.2",
    "@styils/vue": "^1.1.6",
    "tdesign-vue-next": "^1.8.0",
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/jsdom": "^21.1.6",
    "@types/node": "^18.19.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.4.3",
    "@vue/tsconfig": "^0.5.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^23.0.1",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "typescript": "~5.3.0",
    "vite": "^5.0.10",
    "vite-plugin-dts": "^3.7.2",
    "vitest": "^1.0.4",
    "vue-tsc": "^1.8.25"
  },
  "keywords": [
    "triones",
    "vue",
    "vue3",
    "vueComponent",
    "component",
    "components",
    "ui",
    "framework",
    "frontend"
  ],
  "license": "MIT",
  "homepage": "",
  "repository": "https://moensun.coding.net/p/npm/d/triones-tdesign-vue-ext/git"
}

Step6 打包 & 发布

执行下面命令对代码进行打包

npm run build

在正式发布到npm之前，请确保你拥有npm账号并登录，不然可能导致失败

登录npm，输入用户名和密码后就登录成功啦

npm login

开始发布

npm publish

发布成功以后就可以在npm上看到组件了，可以通过npm install测试下组件功能是不是在预期范围内。