npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)

Jacquelyn38
• 阅读 1789

前言

在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。

第一步,安装webpack简易框架

vue init webpack-simple marquee  

这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cli-init


npm install -g @vue/cli-init


vue init 的运行效果将会跟 vue-cli@2.x 相同

第二步,封装Vue插件

1、安装完成后,会出现以下目录即可成功

marquee/  
├── index.html  
├── package.json  
├── README.md  
├── .babelrc  
├── .editorconfig  
├── .gitignore  
├── src  
│   ├── App.vue  
│   ├── assets  
│   │   └── logo.png  
│   └── main.js  
└── webpack.config.js  

2、接下来,我们在src文件夹下创建一个名叫marquee的文件夹,在文件夹里面创建marquee.vueindex.js

marquee/  
├── index.html  
├── package.json  
├── README.md  
├── .babelrc  
├── .editorconfig  
├── .gitignore  
├── src  
│   ├── App.vue  
│   ├── marquee  
│   │   └── marquee.vue  
│   │   └── index.js  
│   ├── assets  
│   │   └── logo.png  
│   └── main.js  
└── webpack.config.js  

3、开始在marquee.vue封装Vue插件了

<template>  
  <div class="marquee-wrap">  
    <!-- 滚动内容 -->  
    <div class="scroll">  
      <p class="marquee">{{text}}</p>  
      <!-- 文字副本 -->  
      <p class="copy"></p>  
    </div>  
    <!-- 为了计算总文本宽度,通过css在页面中隐藏 -->  
    <p class="getWidth">{{text}}</p>  
  </div>  
</template>  

<script>  
export default {  
  name: 'marquee',  
  props: ['val'],  
  data () {  
    return {  
      timer: null,  
      text: ''  
    }  
  },  
  created () {  
    let timer = setTimeout(() => {  
      this.move()  
      clearTimeout(timer)  
    }, 1000)  
  },  
  // 把父组件传入的arr转化成字符串  
  mounted () {  
    for (let item of this.val) {  
      this.text += ' ' + item  
    }  
  },  
  methods: {  
    move () {  
      let maxWidth = document.querySelector('.marquee-wrap').clientWidth  
      // 获取文字text 的计算后宽度 (由于overflow的存在,直接获取不到,需要独立的node计算)  
      let width = document.querySelector('.getWidth').scrollWidth  
      // 如果文本内容的宽度小于页面宽度,则表示文字小于等于一行,则不需要滚动  
      if (width <= maxWidth) return  
      let scroll = document.querySelector('.scroll')  
      let copy = document.querySelector('.copy')  
      copy.innerText = this.text // 文字副本填充  
      let distance = 0 // 位移距离  
      // 设置位移  
      this.timer = setInterval(() => {  
        distance -= 1  
        // 如果位移超过文字宽度,则回到起点  
        if (-distance >= width) {  
          distance = 16 // 距离必须与marquee的margin宽度相同  
        }  
        scroll.style.transform = 'translateX(' + distance + 'px)'  
      }, 20)  
    }  
  },  
  beforeDestroy () {  
    // 清除计时器  
    clearInterval(this.timer)  
  }  
}  
</script>  

<style scoped> .marquee-wrap {  
    width: 100%;  
    overflow: hidden;  
    position: relative;  
  }  
  .marquee{  
    margin-right: 16px;  
  }  
  p {  
    word-break:keep-all;  
    white-space: nowrap;  
    font-size: 16px;  
    font-family: "微软雅黑 Light";  
  }  
  .scroll {  
    display: flex;  
  }  
  .getWidth {  
    word-break:keep-all;  
    white-space:nowrap;  
    position: absolute;  
    opacity: 0;  
    top: 0;  
  }</style>  

4、为了方便查看效果,可以在App.vue先引入组件查看效果

<template>  
  <div id="app">  
       <Marquee :val="msg"></Marquee>  
  </div>  
</template>  

<script>  
import Marquee from '../src/marquee/marquee.vue';  
export default {  
  name: 'app',  
  data () {  
    return {  
      msg: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'  
    }  
  },  
  components:{  
    Marquee  
  }  
}  
</script>  

<style>  
#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  

h1, h2 {  
  font-weight: normal;  
}  

ul {  
  list-style-type: none;  
  padding: 0;  
}  

li {  
  display: inline-block;  
  margin: 0 10px;  
}  

a {  
  color: #42b983;  
}  
</style>  

5、启动命令,查看效果

npm install  
npm run dev  

第三步,发布Vue插件前配置

1、编辑marquee文件夹下的index.js

marquee/  
├── index.html  
├── package.json  
├── README.md  
├── .babelrc  
├── .editorconfig  
├── .gitignore  
├── src  
│   ├── App.vue  
│   ├── marquee  
│   │   └── marquee.vue  
│   │   └── index.js  
│   ├── assets  
│   │   └── logo.png  
│   └── main.js  
└── webpack.config.js  

index.js

// index.js  

// 引入组件  
import marquee from './marquee';  
// 组件需要添加name属性,代表注册的组件名称,也可以修改成其他的  
marquee.install = Vue => Vue.component(marquee.name, marquee); //注册组件  

export default marquee;  

2、修改webpack.config.js

const NODE_ENV = process.env.NODE_ENV;  
module.exports = {  
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/marquee/index.js',  
  output: {  
    path: path.resolve(__dirname, './dist'),  
    publicPath: '/dist/',  
    filename: 'marquee.js', //输出文件名  
    library: 'marquee', // 指定的就是你使用require时的模块名  
    libraryTarget: 'umd', // 指定输出格式, UMD 同时支持两种执行环境:node环境、浏览器环境。  
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define  
  },  
}  

3、打包

npm run build  

如果成功的话,根目录下会出现dist文件夹,里面分别是marquee.jsmarquee.js.map

marquee/  
├── dist  
│   ├── marquee.js  
│   ├── marquee.js.map  
├── index.html  
├── package.json  
├── README.md  
├── .babelrc  
├── .editorconfig  
├── .gitignore  
├── src  
│   ├── App.vue  
│   ├── marquee  
│   │   └── marquee.vue  
│   │   └── index.js  
│   ├── assets  
│   │   └── logo.png  
│   └── main.js  
└── webpack.config.js  

4、修改package.json

{  
 "author": "maomincoding",   
  "main": "dist/marquee.js",  
  "license": "ISC",  
  "keywords": ["marquee"],  
  "private": false,  
}  

author的值为npm用户名,这里一定要注意。main的值为你刚才打包的路径文件license的值按照以上即可keywords为用户搜索的关键词private设为false, 开源因此需要将这个字段改为 false

5、修改.gitignore

可以 删除 dist/字段,提交的时候一并上传上去。

.DS_Store  
node_modules/  
dist/      
npm-debug.log  
yarn-error.log  

# Editor directories and files  
.idea  
*.suo  
*.ntvs*  
*.njsproj  
*.sln  

6、编辑README.md

这是你上传之后的自述文件,可以在网页上显示,用的也是md语法,这里就不显示代码了,来张网页图示范,也可以直接去marquee查看说明npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)

第四步,npm包发布

1、在此之前,你一定要注意先查看登录源,切换到根目录下marquee/

npm config get registry  

如果是 https://registry.npm.taobao.org 那么,输入以下命令,切换到http://registry.npmjs.org

npm config set registry=http://registry.npmjs.org  

切换淘宝源

npm config set registry=https://registry.npm.taobao.org  

2、登录,输入命令

npm login  

相继输入用户名、密码、邮箱。回车出现 Logged in as maomincoding on http://registry.npmjs.org,那么就登陆成功了

3、上传发布

npm publish  

第五步,插件下载使用

替代marquee标签的文字横向滚动Vue插件

1、安装

# install dependencies  
npm i marquee-components  

2、使用

在main.js引入

import marquee from 'marquee-components'  
Vue.use(marquee );  

在页面使用

<template>  
  <div id="app">  
       <marquee :val="msg"></marquee>  
  </div>  
</template>  
<script>  
export default {  
  name: 'app',  
  data () {  
    return {  
      msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'  
    }  
  }  
}  
</script>  

val后加文字即可,当超过文本容器长度时,触动横向滚动效果。

第六步,npm包更新和撤销

1、撤销包

当你想撤销上传的包时,你可以看看下面的说明:撤销的坏处:

  • 1、根据规范,只有在发包的24小时内才允许撤销发布的包。

  • 2、即使你撤销了发布的包,发包的时候也不能再和被撤销的包的名称和版本重复了(即不能名称相同,版本相同,因为这两者构成的唯一标识已经被“占用”了)

  • 3、这里要说一点,取消发布包可能并不像你想象得那么容易,这种操作是受到诸多限制的,撤销发布的包被认为是一种不好的行为(试想一下你撤销了发布的包[假设它已经在社区内有了一定程度的影响],这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情!)

所以,慎行!!!

撤销命令:

npm unpublish 包名 --force  

送给你一句官方说的话

I sure hope you know what you are doing  

2、更新包

看到了撤销的坏处,所以我推荐你更新包。更新包很简单,只需两步:

(1)、打开根目录下的package.json找到version字段

具体体现为:"version":"a.b.c"

1.修复bug,小改动,c加1 2.增加了新特性,但仍能向后兼容,b加1 3.有很大的改动,无法向后兼容,a加1

(2)、根目录下输入npm publish

npm publish  

结语

这里是以发布Vue插件为例,你也可以单独发布一个包。

1、输入命令

npm init  

根据自己的情况输入然后回车,会自动生成一个package.json文件

{  
  "name": "vue-cli-configjs",  
  "version": "2.0.0",  
  "description": "vue.config.js by vue-cli3+",  
  "main": "vue.config.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  "keywords": [  
    "vue-cli-config"  
  ],  
  "author": "maomincoding",  
  "license": "ISC"  
}  

2、然后建一个readme.md自述文件,用于说明

3、最后发布即可

npm publish  

点击下方公众号,领取最新版红宝书

npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)

本文转转自微信公众号** 前端历劫之路**原创https://mp.weixin.qq.com/s/7tGMTOHCkq5BirTs1iEx6g,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue