使用verdaccio搭建私有npm

由于公司项目缘由，须要私有npm

使用以前，咱们先来个哲学三问

为何咱们须要搭建私有cnpm?

• 由于不方便公开
• 能够不用向npm付费，并且东西放在别人服务器上相对没有本身电脑安全。
• 比git方便，也符合你们的习惯?

为何使用verdaccio

由于、开源免费、稳定

工做原理是什么?

（为何要知道原理，之因此我要写这个是由于我以为只有先了解原理以后，后面的文档才方便理解，才有目标，才有行动指南）

其实就是搭建一个服务，而后模拟npm，而这时候若是是本地的包就下载，不是本地的就用npm的。

来个图

install

安装有能够docker、也能够npm，咱们使用npm安装。

npm install -g verdaccio --unsafe-perm
复制代码

这时候可能会报权限错误，请用管理员的方式运行终端。

而后继续。

这时候完成后可能会提示木有python环境，不用管它。

输入

verdaccio
复制代码

当作功了没有。

这时候会输出以下

看到

config file
复制代码

这一行了没有，这个有一个指向路径，找不到config配置文件，就到这里查看。

这个文件能够修改一些配置，你如今用不到，之后必定能够用到。

默认刚安装，只能本身访问，内网的人访问不了，这时候我修改配置文件

vim  C:\Users\admin\AppData\Roaming\verdaccio\config.yaml
复制代码

而后 在最下面添加以下代码

listen:
          0.0.0.0:4873
复制代码

这样同事就能够一块儿访问啦，否则等着报错吧。

使用

咱们刚刚漏说了一点，verdaccio是sinopia的修改版，也就是fork出来的一个分支。由于sinopia不维护了，而后你们好像也遇到不少坑，因此不推荐直接使用sinopia，sinopia是nodejs写的，因此verdaccio也是，这对咱们前端很友好。

刚刚咱们执行verdaccio的时候，会有一个端口，这个端口是4873,而后咱们也修改了内网可见，因此这时候能够localhost:4873访问，在浏览器访问看看，这时候是空的，咱们来添加一下。

新建一个npm包

npm init
复制代码

而后默认是指向index.js，因此咱们在目录下新建一个index.js文件。

而后写代码，代码你随便写，能够简单来个函数，好比

module.exports.Hello = function(name){
    console.log("Hello " + name);
}
复制代码

写好以后开始发布。

npm adduser --registry http://localhost:4873
 npm login --registry=http://localhost:4873
npm publish
复制代码

恭喜你 发布成功，这时候继续访问刚刚打开的网站，或者刷新

如上所示，已经发部成功了

这时候就能够食用（使用）了

安装刚刚发布的npm包

一种是

npm set registry http://localhost:4873/
npm install <你的包名> 
复制代码

一种是 npm install <你的包名> --registry=http://localhost:4873

发连接给同事安装，请用内网IP哦。

问题之，为何我安装后，没有东西？

多是你新建文件开始install，可是木有npm init。因此失败。

好了 很完美

其余

如何删除发布的包呢 ?

npm unpublish <你的包名> --force
复制代码

（被打了不要说从我这里看到的

为何我发布的有些vue组件，在引入的时候报错了呢，提示you may need an appropriate loader to handle this file type.？

兔大说： module parser failed, 是webpack不认识，默认都不会去管node_modules里的代码.

对于兔说的，按个人理解是 babel忽略从node_modules的引入，而后vue-loader引入后又交给了webpack，而后webpack不处理就gg了。

解决方案就是不要直接导出源码

完成代码编写，导出npm组件

新建一个 .babelrc

{
    "presets": [
        "@babel/preset-env",
        "vue"
    ],
    "plugins": []
}
复制代码

在package.json加入build

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src --out-dir lib --copy-files && npm publish --registry=http://localhost:4873"
  },
复制代码

想要了解更多babel cli语法，见下面的相关连接。

而后每次发布的时候，先修改version，而后执行npm run build

这时候代码会跑到lib里面导入lib里面。引入lib里面的代码便可。

（默认vue-loader，会自动加上lib，不过最好加上lib路径，哈哈）

须要安装babel依赖哦，否则会报错，跟我一块儿安装依赖吧

npm install --save-dev babel-cli @babel/preset-env
复制代码

目录以下

/src就是写代码的地方咯。 当咱们执行build的时候就多了一个lib文件。

也能够更具阮老师的下面配置

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-2

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
复制代码

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
}
复制代码

相关连接

github.com/verdaccio/v…
zhaomenghuan.js.org/blog/npm-pr…
babeljs.io/docs/en/6.2…
www.ruanyifeng.com/blog/2016/0…