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

Jacquelyn38 等级 855 0 0
标签: vue软件https

前言

在此之前,你需要去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,如有侵权,请联系删除。

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
快速入门 WePY 小程序
一、WePY介绍 WePY 是 _腾讯_ 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。 二、WePY 使用 1、WePY的安装或更新都通过npm进行: npm install g wepyc
前端组件/库打包利器rollup使用与配置实战
目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/16cb1c297071015523fb08d9e0f
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
VSCode 插件之 ESLint
vscodeeslint github.com/microsoft/v…(https://github.com/microsoft/vscodeeslint) 为了区分 npm ESLint 包和 VSCode 的 ESLint 插件,我把前者称为 npm ESLint,后者称为 vscodeeslint。 vscodeeslint 优先
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
node+mysql+vue+express项目搭建
第一步:项目搭建之前首先需要安装node环境和MySQL数据库。在已经完成上述的条件下开始进行以下操作:1. npm install @vue/cli g   (g 代表全局安装)2. 初始化项目  vue create projectName  (项目名)     (检测是否安装成功过程省略)3. 剩下的配置根据自己需要来选择第二步:在项目的根目录下
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注