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

前言

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

第一步，安装webpack简易框架

vueinitwebpack-simplemarquee

第二步，封装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.vue和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

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

<template>
<divclass="marquee-wrap">
<!–滚动内容–>
<divclass="scroll">
<pclass="marquee">{{text}}</p>
<!–文字副本–>
<pclass="copy"></p>
</div>
<!–为了计算总文本宽度，通过css在页面中隐藏–>
<pclass="getWidth">{{text}}</p>
</div>
</template>
<script>
exportdefault{
name:'marquee',
props:['val'],
data(){
return{
timer:null,
text:''
}
},
created(){
lettimer=setTimeout(()=>{
this.move()
clearTimeout(timer)
},1000)
},
//把父组件传入的arr转化成字符串
mounted(){
for(letitemofthis.val){
this.text+=''+item
}
},
methods:{
move(){
letmaxWidth=document.querySelector('.marquee-wrap').clientWidth
//获取文字text的计算后宽度（由于overflow的存在，直接获取不到，需要独立的node计算）
letwidth=document.querySelector('.getWidth').scrollWidth
//如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动
if(width<=maxWidth)return
letscroll=document.querySelector('.scroll')
letcopy=document.querySelector('.copy')
copy.innerText=this.text//文字副本填充
letdistance=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>
<stylescoped>
.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>
<divid="app">
<Marquee:val="msg"></Marquee>
</div>
</template>
<script>
importMarqueefrom'../src/marquee/marquee.vue';
exportdefault{
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:010px;
}
a{
color:#42b983;
}
</style>

5、启动命令，查看效果

npminstall
npmrundev

第三步，发布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
//引入组件
importmarqueefrom'./marquee';
//组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
marquee.install=Vue=>Vue.component(marquee.name,marquee);//注册组件
exportdefaultmarquee;

2、修改webpack.config.js

constNODE_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、打包

npmrunbuild

如果成功的话，根目录下会出现dist文件夹，里面分别是marquee.js和marquee.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
#Editordirectoriesandfiles
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

6、编辑README.md

这是你上传之后的自述文件，可以在网页上显示，用的也是md语法，这里就不显示代码了，来张网页图示范，也可以直接去marquee查看说明

第四步，npm包发布

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

npmconfiggetregistry

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

npmconfigsetregistry=http://registry.npmjs.org

切换淘宝源

npmconfigsetregistry=https://registry.npm.taobao.org

2、登录，输入命令

npmlogin

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

3、上传发布

npmpublish

第五步，插件下载使用

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

1、安装

#installdependencies
npmimarquee-components

2、使用

在main.js引入

importmarqueefrom'marquee-components'
Vue.use(marquee);

在页面使用

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

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

第六步，npm包更新和撤销

1、撤销包

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

1、根据规范，只有在发包的24小时内才允许撤销发布的包。
2、即使你撤销了发布的包，发包的时候也不能再和被撤销的包的名称和版本重复了(即不能名称相同，版本相同，因为这两者构成的唯一标识已经被“占用”了)
3、这里要说一点，取消发布包可能并不像你想象得那么容易，这种操作是受到诸多限制的，撤销发布的包被认为是一种不好的行为(试想一下你撤销了发布的包[假设它已经在社区内有了一定程度的影响]，这对那些已经深度使用并依赖你发布的包的团队是件多么崩溃的事情!)

所以，慎行!!!

撤销命令：