脚本宝典收集整理的这篇文章主要介绍了

手把手发布一个npm包及相关注意事项

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h2 id="articleHeader0">前言</h2> <p>这里是发布npm包的具体步骤,手把手教会,相关原理在其他文章下面有<br />原理好文章指路<br /><a href="https://www.imooc.com/article/19691" rel="nofollow noreferrer" target="_blank">10分钟教你快速开发一个vue插件并发布npm</a></p> <p><a href="https://juejin.im/entry/58f47b26a0bb9f006aa5476f" rel="nofollow noreferrer" target="_blank">手把手教你封装一个 vue component</a></p> <p>发布之前,需要注册一个npm账号<br /><a href="https://www.npmjs.com/" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/</a> 这里注册</p> <h2 id="articleHeader1">具体步骤</h2> <p>1.新建项目</p> <hr> <p>$ npm install -g vue-cli<br />$ vue init webpack-simple my-project<br />$ cd my-project<br />$ npm install<br />$ npm run dev</p> <p>如需安装less<br />$ npm install less less-loader --save-dev</p> <p>2.代码</p> <hr> <p>src 下面新建一个components文件夹。里面放各种组件文件夹。<br />例如新建input文件夹 里面有index.js 和Input.vue文件</p> <p><span class="img-wrap"><img data-src="/img/bVbiRiH?w=241&amp;h=375" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbiRiJ?w=688&amp;h=487" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// input.js import Input from './Input.vue' export default Input // Input.vue export default { name: 'ui-input', // 这是注册组件的名字。也是要使用这个npm包的标签名字 props: { }, data () { return { } }, mounted () { }, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// input.js</span> <span class="hljs-keyword">import</span> Input <span class="hljs-keyword">from</span> <span class="hljs-string">'./Input.vue'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> Input <span class="hljs-comment">// Input.vue</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { name: <span class="hljs-string">'ui-input'</span>, <span class="hljs-comment">// 这是注册组件的名字。也是要使用这个npm包的标签名字</span> props: { }, data () { <span class="hljs-keyword">return</span> { } }, mounted () { }, }</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// main.js import uiInput from './components/input' const jovoUI = { uiInput, uixxx // 其余vue组件 } if (typeof window !== 'undefined' &amp;&amp; window.Vue) { window.Vue.use(jovoUI) } jovoUI.install = function (Vue, options) { Vue.component(uiInput.name, uiInput) } export default jovoUI // 跑项目的时候测试用,在本地测试的时候,就把组件注册在本地,app.vue里面引用组件调试 // Vue.component('ui-input', uiInput) // new Vue({ // el: '#app', // render: h => h(App)<br /> // })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// main.js</span> <span class="hljs-keyword">import</span> uiInput <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/input'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> jovoUI = { uiInput, uixxx <span class="hljs-comment">// 其余vue组件</span> } <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">window</span> !== <span class="hljs-string">'undefined'</span> &amp;&amp; <span class="hljs-built_in">window</span>.<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>) { <span class="hljs-built_in">window</span>.Vue.use(jovoUI) } jovoUI.install = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">Vue, options</span>) </span>{ Vue.component(uiInput.name, uiInput) } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> jovoUI <span class="hljs-comment">// 跑项目的时候测试用,在本地测试的时候,就把组件注册在本地,app.vue里面引用组件调试</span> <span class="hljs-comment">// Vue.component('ui-input', uiInput)</span> <span class="hljs-comment">// new Vue({</span> <span class="hljs-comment">// el: '#app',</span> <span class="hljs-comment">// render: h =&gt; h(App)</span> <span class="hljs-comment">// })</span></code></pre> <p>需要在本地测试的时候,解开上面的注释,在app.vue或者其他vue文件里测试</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// app.vue <div id=&quot;app&quot;> <ui-input></ui-input> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>// app.vue <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ui-input</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ui-input</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>3.发布准备</p> <hr> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1. .gitignore文件 删掉dist忽略 2. // webpack.config.js 之前是 output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' } 改为 output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', // filename: 'build.js' 这是原来的 filename: 'jovoui.js', // 打包后js的名字,自己取,本地调试时,新加的这些东西都要注释掉,解开filename: 'build.js注释 library: 'jovoui', // 使用require引用时的名字 libraryTarget: 'umd', // 指定你的模块输出类型,可以是commonjs,AMD,script形式,UMD模式 umdNamedDefine: true } 3. // package.json文件 // 文件第一行的 name 是包的名字,不能和已有的npm包重名,否则npm publish时会提示你是否登录,其实你已经登陆了 例如&quot;name&quot;: &quot;jovocom&quot;, private改为false &quot;main&quot;: &quot;dist/jovoui.js&quot; 这条是新增的,是打包文件入口,之前是build.js,参考第二条取得打包名字 4. // index.html // 本地调试时,需要把第一行解开,以及main.js的注释解开 <!-- <script src=&quot;/dist/build.js&quot;></script> -->注释<br /> <script src=&quot;/dist/jovoui.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-number">1.</span> .gitignore文件 删掉dist忽略 <span class="hljs-number">2.</span> <span class="hljs-comment">// webpack.config.js</span> 之前是 output: { <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'./dist'</span>), <span class="hljs-attr">publicPath</span>: <span class="hljs-string">'/dist/'</span>, <span class="hljs-attr">filename</span>: <span class="hljs-string">'build.js'</span> } 改为 output: { <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'./dist'</span>), <span class="hljs-attr">publicPath</span>: <span class="hljs-string">'/dist/'</span>, <span class="hljs-comment">// filename: 'build.js' 这是原来的</span> filename: <span class="hljs-string">'jovoui.js'</span>, <span class="hljs-comment">// 打包后js的名字,自己取,本地调试时,新加的这些东西都要注释掉,解开filename: 'build.js注释</span> library: <span class="hljs-string">'jovoui'</span>, <span class="hljs-comment">// 使用require引用时的名字</span> libraryTarget: <span class="hljs-string">'umd'</span>, <span class="hljs-comment">// 指定你的模块输出类型,可以是commonjs,AMD,script形式,UMD模式</span> umdNamedDefine: <span class="hljs-literal">true</span> } <span class="hljs-number">3.</span> <span class="hljs-comment">// package.json文件 </span> <span class="hljs-comment">// 文件第一行的 name 是包的名字,不能和已有的npm包重名,否则npm publish时会提示你是否登录,其实你已经登陆了 例如"name": "jovocom",</span> private改为<span class="hljs-literal">false</span> <span class="hljs-string">"main"</span>: <span class="hljs-string">"dist/jovoui.js"</span> 这条是新增的,是打包文件入口,之前是build.js,参考第二条取得打包名字 <span class="hljs-number">4.</span> <span class="hljs-comment">// index.html </span> <span class="hljs-comment">// 本地调试时,需要把第一行解开,以及main.js的注释解开</span> &lt;!-- <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/dist/build.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> --&gt;注释 &lt;script src=<span class="hljs-string">"/dist/jovoui.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> </code></pre> <p>4.注意事项</p> <hr> <p>1.每次发布之前,要在package.json改版本号</p> <p>2.npm run build, // 会在生成一个dist文件,里面有jovoui.js和jovoui.map</p> <p>3.npm publish,// 若有错执行第5条,判断是否登录,未登录执行第四条</p> <p>4.npm login your account your password your@email.com</p> <p>5.npm whoami // 判断是否登录</p> <p>6.每次发布完npm包再本地调试npm时,需要解开以下注释<br />(1)index.html 改为 &lt;script src="/dist/build.js"&gt;&lt;/script&gt; // 本地调试时<br />(2)webpack.config.js 里面的注释切换成build那个 新增的注释掉<br />(3)main.js 本地注册的部分解开注释<br />(4)npm run build 打包一次</p> <p>7.更新记一次坑,有一次不知道怎么的切换了淘宝源,npm login一直登不上,报错conflict什么的。要切换到npm官方仓库上,这个时候npm login就能登上了。最后发布npm是发布到官方npm上,不是cnpm,所以要是只能有npm才能下载<br />$ npm install -g nrm <br />$ nrm use taobao<br />$ nrm use npm // 用这句使用npm </p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>8.npm publish出错,说包的名字跟已有的包太相似了,叫换一个,然后换了一个,就成功publish了,所以取名字还是要独特一点,符合这个组件特性一点</p> <h2 id="articleHeader2">使用</h2> <p>npm发布成功使用。<br />$ npm install xx // 这是发布的包的名字,就是package.json里面的name<br />每次包更新之后再次安装可以 $ npm install xx@latest<br />// main.js<br />import xx from '包名'<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(xx)<br />// 某个vue文件<br />&lt;ui-input&gt;&lt;/ui-input&gt; // 这是当初注册组件的名字</p>

总结

以上是脚本宝典为你收集整理的

手把手发布一个npm包及相关注意事项

全部内容,希望文章能够帮你解决

手把手发布一个npm包及相关注意事项

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过