背景

npm install可以将npmjs平台上的模块包安装到本地，但如果想要调试模块包的功能，需要把源码down下来，并且修改后再发布，频繁修改版本，非常麻烦。

所以，在想要本地调试本地的模块包，或者想要本地调试未发布过的包，可以使用npm link。

前言

npm link 可以帮助我们模拟包安装后的状态，它会在系统中做一个快捷方式映射，让本地的包就好像 install 过一样，可以直接使用。

npm link的使用

以下封装的npm包称为 项目A ，引用npm包的项目称为 项目B。

1. 将npm包文件引入项目

在 项目A 的根目录下使用npm link命令将npm包模块注册到全局，在全局的node_modules目录下会出现当前包所在项目的快捷方式引用。
在 项目B 的根目录下使用 npm link package-name命令将包关联到项目中，然后正常使用即可。

2. 从项目中解除npm包文件

在 项目A 的根目录下使用 npm unlink命令解除项目与全局的关联。
在 项目B 的根目录下使用 npm unlink package-name命令解除项目与本地npm包的关联。

npm link引用本地包示例

1. 封装本地组件库

框架：vite + vue3

1.1 脚手架搭建项目

使用vite搭建vue3项目，不选择安装任何依赖项，我的项目名称为'myui'

npm create vite@latest # 使用npm安装vite脚手架

1.2 改造myui项目

基本项目搭建完成后，使用cd myui命令进入项目，输入npm i安装依赖，并且对项目的目录做出如下修改：

修改：src文件夹名称修改为examples

新增：packages文件夹(与examples文件夹同级)

此时运行npm run dev发现页面是空白的，这是因为修改了src目录名称，导致入口文件index.html中的引入路径错误，将script标签的src属性内容由'/src/main.js'替换为'/examples/main.js'，修改完成后页面就可以正常访问了，examples文件夹中的文件主要用来测试组件。

1.3 编写组件

这里编写一个简单的button组件作为示例。

在packages文件夹中新建MyButton文件夹和index.js，MyButton文件夹中新增src/my-button.vue

此时目录如下图：

编写packages/MyButton/src/my-button.vue：

<template>
  <button :disabled="disabled">
    <slot></slot>
  </button>
</template>
<script setup name="MyButton">
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: () => false
    }
  })
</script>
<style>
button {
  width: 200px;
  height: 50px;
}
</style>

再编写packages/MyButton/index.js文件用于导入该组件：

import MyButton from './src/my-button.vue';

MyButton.install = (App) => {
	App.component(MyButton.__name, MyButton);
};

export default MyButton;

导出组件这里，因为name在script标签上，所以获取名字的形参是__name，也可以直接用vue2的写法抛出名字，然后直接.name获取组件名。

再添加packages\index.js文件，用于导出所有的组件（这里其实只有一个组件，多组件只要在此基础上扩展即可），内容如下：

import MyButton from './MyButton';

//按需引入
export { MyButton };

const components = [MyButton];

const install = (App) => {
	components.forEach((item) => {
		App.component(item.__name, item);
	});
};

export default {
	install,
};

1.4 配置vite.config.js文件

首先需要修改vite.config.js文件，对其进行配置修改成库打包的模式，这里输出内容到lib文件夹中，打包入口文件设置为'./packages/index.js'文件，最终配置如下所示：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const { resolve } = require('path');

export default defineConfig({
    plugins: [vue()],
    build: 
    {
        outDir: 'lib',
        lib: {
		entry: resolve(__dirname, 'packages/index.js'), // 指定组件编译入口文件
		name: 'MyUi',
		fileName: 'my-ui',
            },// 库编译模式配置
	rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖
            external: ['vue'],
            output: {
                        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
			globals: {
                                    vue: 'Vue',
				},
			},
		},// rollup打包配置
	},
});

1.5 打包生成lib库

执行npm run build，根据上面的配置文件会在根目录生成一个lib文件夹，里面包含了UMD、ESM规范打包的几个js库文件，还有css样式文件，整个组件库文件最终都会输出在lib文件夹下。

2. 本地调试

根据前面npm link的命令在项目中使用组件即可

<my-button :disabled="false" >button</my-button>

vue3封装组件库，npm link本地调试

背景

前言