在npm发布自己造的*

时间:2024-02-01 15:17:23

提到封装组件,发布到npm,很多同学都会觉得很神秘。但其实,npm包无非就是我们平时写的比较独立且可复用的模块。当然,想要发布,除了基础组件的编写外,还要进行一些包装。下文通过一个简单的案例,和大家一起讨论组件从开发到发布的整个过程。在此承诺,包教包会!

一、封装组件

封装组件包共有3个步骤:

  • 创建组件模板
  • 自定义组件内容
  • 安装依赖,打包组件
1、创建组件模板

命令vue init webpack-simple proName,这里我定义项目名叫“hello-world”。

由于是simple版本,所以语句没有那么多。此时,会生成一个默认的模板,结构如下:

2、自定义组件内容
2.1调整src文件夹,配置入口文件

将src文件夹内的文件全部删掉,新建lib文件夹放组件相关内容。例如:我们新建一个index.vue,负责组件内容的编写。新建一个index.js,负责导出组件,即组件入口文件。

// index.vue 
<template>
    <div style="background-color: bisque;">
       <h1>我是父组件传入的文本:{{message}}</h1>
        <input v-on:input="sendMsg">
     </div>
</template>
<script>
    export default {
         name: 'helloWorld',   
         props: {  
             message: {
                type: String,
                default: () => 'hello world' 
             } 
         }, 
         methods: {
            sendMsg(e) {
               this.$emit('msgFromSon', e.target.value); 
            }
        }
 }; 
</script>                            
// index.js 
import helloWorld from './index.vue'; 
helloWorld.install = function(Vue) {  
     Vue.component(helloWorld.name, helloWorld); 
}; 
export default helloWorld;
2.2 修改package.json文件
  • 在原有依赖文件基础上,向其中添加组件需要的依赖。此时示例组件非常简单,不需要添加额外依赖,略过此步。
  • 配置main属性,指向dist文件下的js文件

不配置main属性的话,组件上传到npm,在项目中下安装引用后,会提示没有安装:提示信息下图:

估计有同学好奇蓝色圈起部分代码是做什么,这是可选项,不必须配置。配置后,会显示在npm包的右侧信息中,比如下图这样:

2.3 修改webpack.config
  • 配置 entry 属性,即构建时的入口。例如:此时组件入口是lib下的index.js。
  • 配置 library 和 libraryTarget 属性:

不配置library和libraryTarget的话,打包、发布、安装到项目,全程不会报错。只是引入组件后,页面不显示组件,审查元素会发现,组件位置显示的是一个串编译后的代码:<!--function(t,n,r,o){return cn(e,t,n,r,o,!0)}-->

3、安装依赖并打包组件

3.1 安装依赖:npm  i

3.2 打包组件:npm run build

看到下图信息,说明打包成功。

3.3 打包时可能会遇到的问题

打包入口不对。回到2.1.3,配置webpack的entry属性。修改完重新打包。

根据提示消息可以知道,是组件中用到了sass-loader,但项目中没有,也就是被略过的步骤2.1.2。组件的依赖不一样,有可能报错依赖名不是这个,各位小可爱举一反三。根据提示消息可以知道,是组件中用到了sass-loader,但项目中没有,也就是,被略过的2.1.2。

解决办法:在package.json中加入该依赖,重新运行npm i,再npm run build即可。


写到现在,组件已基本完成。接下来就是发布。如果担心组件有bug,可以先本地测试一下。详情看下一步【本地模拟发布】。如果组件基本没问题,可直接发布。那请跳过下一节,直接看第三节【发布组件到npm】。

二.本地模拟发布

打包完成后,继续在组件源码根目录下,执行命令:npm pack

命令执行后,会在根目录下生成一下.tgz包,然后在需要引入组件的项目中执行以下命令:npm install 本地包路径,本地包路径为刚才生成的.tgz包路径,注意命令中斜杠方向!!!

举个栗子,我的示例组件在D盘根目录下,所以我要执行的命令就是:npm install D:/hello-world/hello-world-1.0.0.tgz

安装后,package中会出现一条依赖,但本条记录会显示文件路径,因为是本地模拟安装的。不重要,直接测试功能就好。

三、发布组件到npm

3.1 注册npm账号

在npm官网注册账号,地址:https://www.npmjs.com/signup,填写相关信息后,点击最下方的“Create an Account‘’按钮。

注意:

  1. 用户名(Uearname)注册后不可修改,慎重填写。其他项可在个人资料中修改。
  2. 邮箱要进行验证,会发送验证链接到注册邮箱,没有验证的话不能发布组件包。

3.2 登录、发布

切换到需要发包的项目根目录下,登录npm账号,输入用户名、密码、邮箱

登录:npm login

发布:npm publish

3.3 发布时可能遇到的问题

package文件中设置了private:true。将private设置为false,或移除private属性即可。

看来“hello-world”包名被占用了。所以最好在官网查一下是否已存在该包名,然后修改package.json中的name值重新发布。

每次发布到npm上需要更改版本号,即package.json 里的 version 字段不可与已发布的包版本号相同。

四.组件安装及使用

1 、首先确认组件发布情况:有两种方式

  • 无需登录,直接在npm中搜包名,可以搜到即发布成功
  • 登录npm官网,点击个人头像下“packages”选项。可以看到包,说明发布成功。

2、如果发布成功,即可在项目中直接使用组件:

命令:npm install 组件名称这里我执行 npm i lemoncool-test安装完成,在页面中应用该组件:

<template>
   <div id="app">
        <lemoncoolTest :message="msg" @msgFromSon="receiveMsg">
        </lemoncoolTest>
   </div>
</template>
<script>
    import lemoncoolTest from 'lemoncool-test';  
    export default { 
         name: 'app',
         components: { lemoncoolTest }, 
         data() { 
            return {  
               msg: 'Welcome to Your Vue.js App'  
            }             
         }, 
         methods: {   
           receiveMsg(val) { 
                 console.log(val); 
             }                
        } 
 } 
</script>

启动后,页面效果如下,说明组件封装和安装都成功

五.组件删除

npm不鼓励任何形式的删除,主要因为我们发布的包可能已经被其他人引用,如果我们删除,会对使用者造成很大困扰。

基于此,npm做了相关的删除限制:

   删除的版本24小时后方可重发!

   只有发布72小时之内的包可以删除!

如果一定需要删除,执行命令:npm unpublish 包名 --force,要加--force。

由于我刚刚上传的包只是为了测试,没什么价值,就不要占空间了,所以执行命令:npm unpublish lemoncool-test --force

此时去npm官网搜包名,或者去自己名下看。package已经不见了。说明删除成功。同时,已删除的包无法再进行安装。

到此为止,组件的封装配置、打包、测试、发布,甚至删除,我们就讨论完了。文章中示例组件有很多需要改进的地方,大家参考相关配置就好。源码没有上传,如果有需要,可以留言板call我。

一个人能力当中所蕴藏的潜能,远超过自己想象以外。奥利给~