Vite项目使用 npm link 链接库时无法成功导入该库的原因

### 验证 npm 包打包后是否可以成功 `import` 导入 为了确保创建并发布的 npm 包能够正常工作，在本地环境中模拟安装和使用该包是一个有效的验证方法。 #### 创建测试项目 建立一个新的 Vue 或者其他框架的项目用于测试新发布的 npm 包。这可以通过命令行工具如 Vite 来快速完成： ```bash npm create vite@latest test-project --template vue cd test-project ``` #### 安装自定义 npm 包 在项目的根目录下执行如下命令来安装之前构建好的 npm 包，假设这个包的名字叫作 `my-custom-package`: ```bash npm install my-custom-package ``` 如果是在开发阶段并且希望直接链接到本地构建版本，则可考虑使用 `npm link` 方法来进行更便捷的操作[^1]。 #### 修改入口文件以引入组件 编辑主应用程序文件（例如 main.js），按照常规方式导入所需的模块或组件，并注册它们以便可以在应用中使用这些资源。对于 Vue 应用来说，通常会像这样操作： ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' // 假设要测试的是名为 MyCustomPackage 的默认导出对象 import MyCustomPackage from 'my-custom-package' const app = createApp(App) app.use(MyCustomPackage) // 如果是插件形式的话 // 或者如果是单个组件的形式可以直接通过 component 注册 // app.component('MyComponent', MyCustomPackage.MyComponent) app.mount('#app') ``` #### 使用 TypeScript 类型声明 (如果有) 当涉及到带有类型的 JavaScript 模块时，还需要确认类型定义文件已正确配置。比如在一个 `.d.ts` 文件里扩展全局命名空间中的接口属性，从而让 IDE 和编译器识别来自外部库的新成员[^4]: ```typescript // types/my-custom-package.d.ts declare module 'my-custom-package' { const version: string; export default class MyCustomClass { static method(): void; } } ``` 最后一步就是运行此测试工程，观察控制台输出以及页面表现情况，以此判断所发布的 npm 包是否能顺利地被另一个独立的应用程序加载进来并正常使用其功能特性。