快速开发

假设本次开发的是组件类型的依赖包,比如滑动组件vue-drag-slider-mini

步骤就是先在本地新建一个全新的项目(文件夹),然后开发。

开发组件后,在发布之前,可以先本地测试下。

测试方式有两种:

1、在依赖包根目录下,输入如下指令:

npm link

链接到本地依赖包库后,在项目根目录下运行如下指令:

npm link 依赖包的名字 
# 比如
npm link vue-drag-slider-mini

链接成功,如下提示,就可以在项目中使用了。

npm本地开发并link依赖包的教程_依赖包

PS D:\WebProjects\qiankun\vue-admin-template-4.4.0-main> npm link vue-drag-slider-verify-mini
D:\WebProjects\qiankun\vue-admin-template-4.4.0-main\node_modules\vue-drag-slider-verify-mini -> C:\Program Files\nodejs\node_modules\vue-drag-slider-verify-mini -> D:\WebProjects\npmProject\vue-drag-slider-verify-mini

你可以在项目的node_modules文件夹查看是否已经导入成功。

注意:修改了依赖包代码,也会同步影响到引用了该依赖包的项目。

依赖包的名字即为在package.json中的name

2、因为我们开发的只是一个组件类型的依赖包,所以,也可以将该组件文件夹复制到项目的比如components文件夹,然后导入测试。

这个就相当于在项目中开发了一个组件,如何导入的问题了。

具体开发步骤

1、依赖包其实就是一个很小型的项目。所以跟你开发项目一样,也需要有package.json,一些配置文件等,如果是基于vue,那就新建一个vue的项目即可

2、注意需要有一个`index.js`文件,该文件用于导出组件,即暴露出去。

类似于:

import dragVerify from './src/main';
//这个install可以不写,除非你需要在依赖包中新建demo进行测试
dragVerify.install = function (Vue) {
  Vue.component(dragVerify.name, dragVerify);
};

export default dragVerify;

3、如果有构建为dist目录的方式导出给其他人用,避免自己的源码泄露,则可以配置webpack.config.js等前端构建工具,然后在package.json中配置main

main": "dist/index.js",

使用npm依赖包的好处

npm本地开发并link依赖包的教程_npm_02

将一些公共的组件或库封装为依赖包,并发布到npm的好处:

1、享受开源的好处,如吸引粉丝,增强话语权

2、方便版本维护和升级

其实开发npm包和开发普通的组件相比,就相当于是多了一层外包装壳。

核心代码还是一样的。

唯一要注意的是需要导出去使用。