在npm上发布包和更新包需要注意的几个问题（这里以发布vue插件为例）

.marquee-wrap{width:100%;overflow:hidden;position:relative;}.marquee{margin-right:16px;}p{word-break:keep-all;white-space:nowrap;font-size:16px;字体系列:";MicrosoftYaheiLight";}.scroll{display:flex;}.getWidth{word-break:keep-all;white-space:nowrap;position:absolute;opacity:0;top:0;}前言在此之前，您需要在npm官网，记住你的账号和密码，邮箱地址，后面会用到。第一步安装webpack简单框架vueinitwebpack-simplemarquee第二步打包Vue插件1.安装完成后会出现如下目录，可以成功marquee/├──index.html├──package.json├──自述文件。md├──.babelrc├──.editorconfig├──.gitignore├──src│├──App.vue│├──assets││└──logo.png│└──main.js└──webpack.config.js2。接下来，我们在src文件夹下创建一个名为marquee的文件夹，并在文件夹内创建marquee.vue和index.jsmarquee/├──index.html├──package.json├──README.md├──.babelrc├──.editorconfig├──.gitignore├──src│├──App.vue│├──marquee││└──marquee.vue││└──index.js│├──assets││└──logo.png│└──main.js└──webpack.config.js3.开始在marquee.vue中打包Vue插件.marquee-wrap{width:100%;overflow:hidden;position:relative;}.marquee{margin-right:16px;}p{word-break:keep-all;white-space:nowrap;font-size:16px;字体系列:";MicrosoftYaheiLight";}.scroll{display:flex;}.getWidth{word-break:keep-all;white-space:nowrap;position:absolute;opacity:0;top:0;}4.为了方便查看效果，可以先在App.vue中引入组件查看效果5.启动命令查看效果npminstallnpmrundev第三步.发布Vue插件前配置1.编辑跑马灯文件夹index.html├──package.json├──README.md├──下的index.jsmarquee/├──。babelrc├──.editorconfig├──.gitignore├──src│├──App.vue│├──marquee│└──marquee.vue│└──index.js│├──assets│└──logo.png│└──main.js└──webpack.config.jsindex.js//index.js//引入组件importmarqueefrom'./marquee';//组件需要添加name属性，代表注册的组件名称，也可以修改到其他跑马灯.install=Vue=>Vue.component(marquee.name,marquee);//注册组件exportdefaultmarquee;2.修改webpack.config.jsconstNODE_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',//指定requirelibraryTarget:'umd',//指定输出格式，UMD同时支持两种执行环境：node环境，浏览器环境umdNamedDefine:true//会在UMD构建过程中命名AMD模块.否则使用匿名define},}3.如果npmrunbuild成功，根目录下会出现一个dist文件夹，里面有marquee.js和marquee.js.mapmarquee/├──dist│├──marquee.js│├──marquee.js.map├──index.html├──package.json├──README.md├──.babelrc├──.editorconfig├──.gitignore├──src│├──App.vue│├──选框││└──marquee.vue││└──index.js│├──assets││└──logo.png│└──main.js└──webpack.config.js4.修改package.json{"author":"maomincoding","main":"dist/marquee.js","license":"ISC","keywords":["marquee"],"private":的值false,}author是npm用户名，这里一定要注意。main的值就是你刚才按照上面打包的路径文件license的值。有时间一起上传。.DS_Storenode_modules/dist/npm-debug.logyarn-error.log#Editordirectoriesandfiles.idea*.suo*.ntvs**.njsproj*.sln6.编辑README.md这是你上传的readme文件，可以显示在网页，同样使用md语法，这里不再展示代码。这里有网页演示，也可以直接进入跑马灯查看说明。第四步，npm包发布1.在此之前，一定要注意先检查登录源，切换到根目录下的marquee/npmconfiggetregistry。如果是https://registry.npm.taobao.org，则输入以下命令切换到http://registry.npmjs.orgnpmconfigsetregistry=http://registry.npmjs.org切换淘宝源npmconfigsetregistry=https://registry.npm.taobao.org2.登录输入命令npmlogin依次输入用户名、密码、邮箱。回车后出现Loggedinasmaomincodingonhttp://registry.npmjs.org则登录成功3.上传并发布npmpublishStep5.插件下载使用文本水平滚动替换跑马灯的Vue插件tag1.安装#installdependenciesnpmimarquee-components2，在main.js中使用importmarqueefrom'marquee-components'Vue.use(marquee)；在页面上使用val可以加在文本后面，当超过文本容器长度时，触摸水平滚动效果。第六步，npm包更新和撤销1.包的撤销当你想撤销上传的包时，可以阅读下面的说明：撤销的缺点：1.根据规范，release只能在发布后的24小时内撤销。发送包裹包裹。2、即使你撤销了发布的包，发送包时也不能再重复被撤销的包的名称和版本（即名称和版本不能相同，因为两者形成的唯一标识已经被"occupied")3.在这里我想说，取消发布一个包可能没有你想的那么容易。此操作受到许多限制。取消发布一个包被认为是一种不良行为（试想一下，你取消发布包[假设它已经在社区中具有一定程度的影响力]，对于那些已经使用并深深依赖你发布的包的团队来说是多么崩溃！）所以，当心！！！撤消命令：npmunpublish包名--force给你官方说法：Isurehopeyouknowwhatyouaredoing2。更新包看到了吊销的坏处，建议大家更新包。更新包很简单，只需两步：(1)、打开根目录下的package.json，找到version字段，具体体现为："version":"a.b.c"1.修复bug，小改动,add1toc2.Add增加了新特性，但还是向下兼容，b加13.有较大变化，不向下兼容，a加1（2），在根目录下输入npmpublishnpmpublish结论这里以发布一个Vue插件为例，也可以单独发布一个包。1、根据自己的情况输入命令npminit回车，会自动生成一个package.json文件{"name":"vue-cli-configjs","version":"2.0.0","description":"vue.config.jsbyvue-cli3+","main":"vue.config.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":["vue-cli-config"],"author":"maomincoding","license":"ISC"}2.然后创建一个readme.mdreadme文件进行解释3.最后直接发布npmpublish