使用npm link本地测试组件库

目录

一、项目目录结构

二、npm注册与登录

三、配置文件

四、本地测试

---

一、项目目录结构

project/
├── cream-design/                （组件库项目）
├── cream-npm-link-test/        （测试项目）

二、npm注册与登录

1. 若未注册npm，请先进入npm官网：npm | Home ，自行注册
2. 使用命令行进行登录，确保2个项目都登录npm

// 登录
npm login
// 查看用户
npm whoami

三、配置文件

若项目根目录下尚无package.json文件，则需创建该文件，可在命令行工具中通过npm命令进行自动化创建。

cd /project/cream-design // 进入项目根目录
npm init

修改配置文件，并进行打包操作

// package.json{"name": "anxin-glaze-ui","version": "1.0.0","main": "dist/index.js","module": "dist/index.js","types": "dist/index.d.ts",......
}

四、本地测试

将当前项目挂载到本地NPM store中：

cd /project/cream-design // 进入项目根目录
npm link

在测试项目中引入当前包：

cd /project/cream-npm-link-test // 进入测试项目根目录
npm i your-package-name

然后进行测试：

import * from "your-package-name"
// ***