1、引言

多人、多组织或多组件发布 npm 包到同一个仓库时,可能出现命名冲突问题。

为了解决这个问题,npm 引入了“scope”(范围)概念。

在 Angular 项目中,我们通常可以看到“@angular/core”、“@angular/common”等以“@”符号开头、“/”间隔形式的依赖包,其中“@”和“/”之间的部分就是“scope”,类似编程环境中的“命名空间”。

包含“scope”的包安装到本地后,“scope”以文件夹的形式表现,如下图所示:

2、安装

安装一个包含“scope”包命令如下:

npm install @angular/core

安装的时候还可以指定版本号:

npm install @angular/core@6.1.

相应地,不包含“scope”的包安装命令如下:

npm install moment

同样也可以指定版本号:

npm install moment@1.2.

3、发布

怎样才能以“scope”的形式将 组件或包发布到 npmjs 或 nexus 呢?

只需配置 npm 参数和项目 package.json 即可:

  • 配置 npm 参数
npm config set @my-scope:registry "http://192.168.x.y:z/my-repository/"

其中,“my-scope”即与“http://192.168.x.y:z/my-repository/”相应的“scope”。

  • 配置项目 package.json
{
"name": "@my-scope/my-component",
//...
}
 

其中“my-scope”是所属的“scope”。

配置好之后再运行发布命令:

npm publish --registry http://192.168.x.y:z/my-repository/

如果发布时不想指定 registry,可以先配置 npm registry:

npm config set registry http://192.168.x.y:z/my-repository/

或者在项目 package.json 中指定:

{
"name": "component-project",
"publishConfig": {
"registry": "http://192.168.x.y:z/my-repository/"
}
//...
}

前端组件用 Scope 发布 npm 包的方法的更多相关文章

  1. 不会发布npm包?进来看看?

    前言 npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这 ...

  2. 使用Vue-cli3.0创建的项目,如何发布npm包

    使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建ind ...

  3. 创建并发布npm包

    1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...

  4. 使用cnpm搭建私有NPM仓库 发布npm包

    关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记 ...

  5. 基于vue组件,发布npm包

    亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...

  6. 用@vue/cli发布npm包

    1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...

  7. 使用vuecli3发布npm包

    一.使用vuecli3创建项目 vue create svgicon 二.修改目录,开发组件前的准备 把src目录改为examples作为查看组件的演示目录,新建packages目录作为组件编写的目录 ...

  8. node学习笔记8——发布npm包

    1.注册一个npm账号: 2.在控制台输入 npm login: 依次输入你的账号信息,可通过 npm whoami 来验证是否登录成功 3.初始化包,控制台输入 npm init: 完成之后,可以看 ...

  9. 开发并发布npm包,支持TypeScript提示,rollup构建打包

    前言: 工作了几年,想把一些不好找现成的库的常用方法整理一下,发布成npm包,方便使用.也学习一下开发发布流程. 主要用到的工具:npm. 开发库:babel.typescript.rollup.es ...

随机推荐

  1. C#调用OpenCV开发简易版美图工具

    前言 在C#调用OpenCV其实非常简单,因为C#中有很多OPenCV的开源类库. 本文主要介绍在WPF项目中使用OpenCVSharp3-AnyCPU开源类库处理图片,下面我们先来做开发前的准备工作 ...

  2. Scala 多继承问题

    多继承问题: object LoadIssueDemo extends App { import java.io.PrintWriter trait Logger { def log(msg: Str ...

  3. 星之小说下载器Android版

    原本是想在酷安上架的,然而审核不通过..只能通过网页方式宣传了 一款使用Jsoup开源库网络爬虫的APP,将在线阅读的小说解析,把小说全本下载为txt文件 由于使用爬虫技术,所以下载的速度不是很理想, ...

  4. SSH实现无密码登录

    1.生成秘钥 : ssh-keygen -t rsa # -t 指定生成秘钥方式,生成秘钥过程需要三次回车 2.将生成的公钥传给 ssh 的对端 ssh-copy-id root@192.168.3. ...

  5. day 23

    目录 面向对象总复习 面向对象总复习 面向过程编程思想: ​ 核心是过程,过程指的是做事情的步骤,即先干什么再干什么. ​ 基于该编程思想编程,就好比一条流水线,一种机械式的思维方式. 面向对象编程思 ...

  6. ConcurrentHashMap实现原理以及源码分析

    ConcurrentHashMap是HashMap的高并发版本,是线程安全的,而HashMap是非线程安全的 一.底层实现 底层结构跟hashmap一样,都是通过数组+链表+红黑树实现的,不过它要保证 ...

  7. CSRF漏洞实战靶场笔记

    记录下自己写的CSRF漏洞靶场的write up,包括了大部分的CSRF实战场景,做个笔记. 0x01 无防护GET类型csrf(伪造添加成员请求) 这一关没有任何csrf访问措施 首先我们登录tes ...

  8. 域渗透基础之Windows 2012创建域控制器

    创建备份域控制器 这里就拿windows 2012 R2来当备份域控 如果一个域内有多个域控制器,可以有如下好处. 提高用户登录的效率:如果同时有多台域控制器对客户提供服务,可以分担审核用户登录身份( ...

  9. OCPC(Optimized Cost per Click)[Paper笔记]

    背景 在线广告中,广告按照CPM排序,排在前面的广告竞争有限广告位(截断).其中,CPM=bid*pctr.注GSP二价计费的,按照下一位bid计费.适当调整bid,可以提高竞价的排名,从而获得展现的 ...

  10. PHP get_object_vars 和 get_class_vars

    <?php class Girl { public $id = 1; public $name = 'zhy'; } $girl = new Girl(); var_dump(get_class ...