快速开发
假设本次开发的是组件类型的依赖包,比如滑动组件vue-drag-slider-mini
。
步骤就是先在本地新建一个全新的项目(文件夹),然后开发。
开发组件后,在发布之前,可以先本地测试下。
测试方式有两种:
1、在依赖包根目录下,输入如下指令:
npm link
链接到本地依赖包库后,在项目根目录下运行如下指令:
npm link 依赖包的名字
# 比如
npm link vue-drag-slider-mini
链接成功,如下提示,就可以在项目中使用了。
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的好处:
1、享受开源的好处,如吸引粉丝,增强话语权
2、方便版本维护和升级
其实开发npm包和开发普通的组件相比,就相当于是多了一层外包装壳。
核心代码还是一样的。
唯一要注意的是需要导出去使用。