npm发布组件包并使用(详细)

最新推荐文章于 2024-09-27 15:38:14 发布

网瘾颓废

最新推荐文章于 2024-09-27 15:38:14 发布

阅读量10w+

点赞数 2

分类专栏： npm发布并使用文章标签： npm

本文链接：https://blog.csdn.net/weixin_44021417/article/details/105987493

版权

npm发布并使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

源码地址，如果对你有帮助的话希望不要吝啬你的 Star

为啥要编写npm？？

小朋友你是否有很多问号？？？
通常一个好的插件首要的是解决用户的问题,其次在有必要的情况下再进行个别案例的解决,通常需要如下：

通用性 // 能够满足大部分用户需求
可订制性 // 能够满足用户针对不同业务环境进行订制
可扩展性 // 能够满足用户对其他方面的拓展

简化点呢就是说这个组件我在a系统有写，b，c系统也各有一模一样的需求，这砖搬得有点累，那我何不并成一个通用的，需要的时候直接用(被自己的聪明感动到了哈哈~)

创建vue组件

创建vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目

vue init webpack-simple

components目录下的话可以放入自己需要封装并npm使用的组件（组件命名 name: xxx，用于后面的导出）

index.js代码如下，作用是将dialog组件作为 Vue 插件，注册到 Vue 中

import dialogCommon from './dialogCommon';
dialogCommon.install = function(Vue) {
  Vue.component(dialogCommon.name, dialogCommon); //name就是开始说的vue文件暴露出来的name名
};
export default dialogCommon;

代码中使用Vue.component()方法注册全局组件。第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。
第二个参数是将要注册的Vue组件

当我们上面的准备工作差不多了呢，这时候有多个组件导出时，需要将所有组件放在一个文件下，在与App.vue同级目录下新建index.js;引入所有组件集中管理然后全部导出(多组件和单组件同理)

import tableCommon from "./components/table/index";
import paginationCommon from "./components/pagination/index";
import dialogCommon from "./components/dialog/index";
const components = [
 tableCommon,
 paginationCommon,
 dialogCommon
 // ...如果还有的话继续添加
]
 
const install = function (Vue, opts = {}) {
 components.map(component => {
 	Vue.component(component.name, component);
 })
}
 
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
	install.use(window.Vue);
}
 
export default {
	version: '1.0.3',			//此为npm版本号可填可不填，在package.json才为重要
	tableCommon,
	paginationCommon,
	dialogCommon
}

使用Vue.use注册插件。

这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。
如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件。
插件的install方法将接收两个参数，第一个是参数是Vue，第二个参数是配置项options。
在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。

4.修改配置文件
(1).打包之前，首先我们需要改一下 webpack.config.js 这个文件

module.exports = {
  entry:process.env.NODE_ENV=='development'?'./src/main.js':'./src/index.js', //
  output: {
  // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: "vue-element-commonm.js",
    library: "elementCommon", // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

(2)修改 package.json 文件（主要修改这两值）

package.json中的version版本号前的字符含义
~version：大概某个版本 ~1.2.1就是>=1.2.1 && <1.3.0
^version：向后兼容 ^1.2.1就是>=1.2.1 && <2.0.0
版本号格式：主版本号.次版本号.修补版本号
主版本号：新增功能，兼容老版本
次版本号：修复bug，兼容老版本
修补版本号：新的架构调整，不兼容老版本

具体可参考package.json中 npm依赖包版本前的符号的意义

每次发包时，更改package.json中的version
// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import Dilalog组件的时候它会去检索的路径
"main": "dist/vue-element-table.min.js",

还有一些可配置项可关联你的GitHub

"repository": {
    "type": "git",
    "url": "git@https://github.com/xxx/xxx.git"
},

5.测试，测试这些配置是否OK以及组件是否能够正常运行提供个思路
1.import 名称 from ‘组件库名(index.js)’
Vue.use(名称);
项目的任意组件中引用就行了，如果引入成功，则说明导出成功，然后可尝试发布

发布到 npm

准备工作OK，现在开始npm的准备工作

//首先去npm官网注册一个npm账号
npm adduser 		//添加用户虽然也可注册，但publish可能会报错--
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
----------------npm命令行----------
npm whoami   				//查看当前登录的用户
npm login     			 	// 登录你的用户，密码
npm publish 				 // 进行发布
npm unpublish --force //强制删除

发布之后可能会有一系列报错===
(1).npm ERR! publish Failed PUT 403
需对绑定的邮箱进行绑定验证之后，npm账号才可生效，然后再登录发布
(2)发布自己的npm组建名之前，可到npm官网查看是否重名，毕竟人家npm不允许重名
发布之后可在npm官网去查看了啊！
在这里插入图片描述
结果如下

发布完成之后使用

在我们的项目中使用

npm install vue-element-commonm -S  (vue-element-commonm为刚才咱们发布的npm名字)

在这里插入图片描述
当报这样的错误时，咱们必须得use使用，并不是import就完事了，切结！我犯了这个错误好几次！！！
在 main.js 中引入插件(现在只能想到多组件一个个use使用，像ElementUI一次性引入还没有找到解决办法)

import elementCommon from 'vue-element-commonm'
Vue.use(elementCommon.tableCommon).use(elementCommon.paginationCommon)

在组件中使用(具体代码就不写出来了，GitHub自行查看吧)

<table-common v-bind:formDateTable="formDateTable"></table-common>
<pagination-common
      v-bind:formDatePagination="paginationDate"
      @changeCurrentPage="setCurrentPage"
      @changePageSize="setPageSize"
    ></pagination-common>