相信很多前端的小伙伴对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测试下组件功能是不是在预期范围内。