npm 模块开发教程从入门到入门 - NPM

现在项目开发，离不开各种组件框架，比如express,pm2,vue,react,npm，那么如何上传自己的组件呢，下面带大家入门

创建组件

新建一个目录

mkdir npm-module

然后初始化

npm init

输入项目名称等信息，不清楚的直接按确认

你会发现一个package.json文件，这个文件是用来表述项目信息的，包括名称，版本，依赖，版权，git地址。。。。（非常重要）

现在我们开发一个** 获取URL参数 **的组件

原则就是最后导出一个对象供别人使用

具体实现看代码

function query2json(url) {
    var hashIndex = url.indexOf('#'),
        strQuery,
        arrQuery,
        map = {};
<span class="nx" style="box-sizing: border-box;">strQuery</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">url</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">substring</span><span class="p" style="box-sizing: border-box;">(</span><span class="nx" style="box-sizing: border-box;">url</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">indexOf</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: rgb(221, 17, 68);">&#39;?&#39;</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">+</span> <span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">1</span><span class="p" style="box-sizing: border-box;">,</span> <span class="nx" style="box-sizing: border-box;">hashIndex</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">&lt;</span> <span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="p" style="box-sizing: border-box;">?</span> <span class="kc" style="box-sizing: border-box; font-weight: bold;">undefined</span> <span class="p" style="box-sizing: border-box;">:</span> <span class="nx" style="box-sizing: border-box;">hashIndex</span><span class="p" style="box-sizing: border-box;">);</span>

<span class="nx" style="box-sizing: border-box;">arrQuery</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">strQuery</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">split</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: rgb(221, 17, 68);">&#39;&amp;&#39;</span><span class="p" style="box-sizing: border-box;">);</span>

<span class="k" style="box-sizing: border-box; font-weight: bold;">for</span> <span class="p" style="box-sizing: border-box;">(</span><span class="kd" style="box-sizing: border-box; font-weight: bold;">var</span> <span class="nx" style="box-sizing: border-box;">i</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span><span class="p" style="box-sizing: border-box;">,</span> <span class="nx" style="box-sizing: border-box;">len</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">arrQuery</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">length</span><span class="p" style="box-sizing: border-box;">;</span> <span class="nx" style="box-sizing: border-box;">i</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">&lt;</span> <span class="nx" style="box-sizing: border-box;">len</span><span class="p" style="box-sizing: border-box;">;</span> <span class="nx" style="box-sizing: border-box;">i</span><span class="o" style="box-sizing: border-box; font-weight: bold;">++</span><span class="p" style="box-sizing: border-box;">)</span> <span class="p" style="box-sizing: border-box;">{</span>
    <span class="kd" style="box-sizing: border-box; font-weight: bold;">var</span> <span class="nx" style="box-sizing: border-box;">queryItem</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">arrQuery</span><span class="p" style="box-sizing: border-box;">[</span><span class="nx" style="box-sizing: border-box;">i</span><span class="p" style="box-sizing: border-box;">],</span>
        <span class="nx" style="box-sizing: border-box;">arrTemp</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">queryItem</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">split</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: rgb(221, 17, 68);">&#39;=&#39;</span><span class="p" style="box-sizing: border-box;">),</span>
        <span class="nx" style="box-sizing: border-box;">key</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">arrTemp</span><span class="p" style="box-sizing: border-box;">[</span><span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span><span class="p" style="box-sizing: border-box;">];</span>

    <span class="k" style="box-sizing: border-box; font-weight: bold;">if</span> <span class="p" style="box-sizing: border-box;">(</span><span class="nx" style="box-sizing: border-box;">arrTemp</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">length</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">&gt;</span> <span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">0</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">&amp;&amp;</span> <span class="nx" style="box-sizing: border-box;">key</span><span class="p" style="box-sizing: border-box;">)</span> <span class="p" style="box-sizing: border-box;">{</span>
        <span class="nx" style="box-sizing: border-box;">map</span><span class="p" style="box-sizing: border-box;">[</span><span class="nx" style="box-sizing: border-box;">key</span><span class="p" style="box-sizing: border-box;">]</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">arrTemp</span><span class="p" style="box-sizing: border-box;">[</span><span class="mi" style="box-sizing: border-box; color: rgb(0, 153, 153);">1</span><span class="p" style="box-sizing: border-box;">]</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">||</span> <span class="s1" style="box-sizing: border-box; color: rgb(221, 17, 68);">&#39;&#39;</span><span class="p" style="box-sizing: border-box;">;</span>
    <span class="p" style="box-sizing: border-box;">}</span>
<span class="p" style="box-sizing: border-box;">}</span>

<span class="k" style="box-sizing: border-box; font-weight: bold;">return</span> <span class="nx" style="box-sizing: border-box;">map</span><span class="p" style="box-sizing: border-box;">;</span>

};
exports.query2json = query2json;

index.js

现在我们新建一个test.js 测试我们代码

var fn = require('./index.js');
var obj = fn.query2json('https://segmentfault.com/t/javascript?type=newest&amp;page=2&#39;);
console.log(obj);

执行test.js

发布到NPM

去官网注册一个自己的开发账号

记住自己的账号，密码，邮箱

命令行连接npm

npm adduser

查看当前用户

npm whoami

发布

npm publish

使用

进入项目目录

npm install qinguolei

var fn = require('qinguolei');
var obj = fn.query2json('https://segmentfault.com/t/javascript?type=newest&amp;page=2&#39;);
console.log(obj)

index.js

node index.js

是不是很炫酷，是不是，是不是。。。。(二笔)

其实npm的威力，不仅仅如此，npm可以引用Node的各个模块，http，fs，path等等，对文件，路由，进程进行管理调用，我们可以用它来开发脚手架，node框架等等。

问题

提示你 correct user ，发布失败。

解决办法：你把package.json里面的author改成自己npm的名字

提示你 version错误

发布后，再次修改代码记得更改版本号

npm registry 代理连接失败

因为国内被强，很多实用cnpm或者tnpm代理，需要改回来

npm config set registry https://registry.npmjs.org/

常用的代理

npm —- https://registry.npmjs.org/
cnpm — http://r.cnpmjs.org/
eu —– http://registry.npmjs.eu/
au —– http://registry.npmjs.org.au/
sl —– http://npm.strongloop.com/
nj —– https://registry.nodejitsu.com/

著作权声明

原文地址： npm 模块开发教程 | 覃国雷的博客