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. InnoDB体系结构

    1.前言 整理了下InnoDB体系结构,方便以后更简单的理解 2.思维导图 参考: https://www.cnblogs.com/tangshiguang/p/6741035.html https: ...

  2. html5一些特性

    html5可以理解为html+css+js 其目前可以解决:1.浏览器的兼容问题 2.统一web应用标准 3.解决文档结构定义不明确问题 4.解决web应用中的功能受限问题 5.是程序员编写的web应 ...

  3. 超大规模商用 K8s 场景下,阿里巴巴如何动态解决容器资源的按需分配问题?

    作者 | 张晓宇(衷源)  阿里云容器平台技术专家 关注『阿里巴巴云原生』公众号,回复关键词"1010",可获取本文 PPT. 导读:资源利用率一直是很多平台管理和研发人员关心的话 ...

  4. 1.Eclipse下载、常用配置、快捷键

    Eclipse官网下载:https://www.eclipse.org/downloads/packages/ 自动补全 位置:Eclipse——Window——Perferences——Java—— ...

  5. CSDN VIP如何添加引流自定义栏目

    几个月前我也开始在csdn上开了博客,一来给自己加几个少的可怜的流量,再者,让公众号的原创文章获得更多的曝光,让有需要的同学看到. 写过csdn博客的同学都知道,默认只有打赏c币功能:也没有专门广告位 ...

  6. 自己动手撸一个LinkedList

    自己动手撸一个LinkedList 1. 原理 LinkedList是基于双链表的动态数组,数据添加删除效率高,只需要改变指针指向即可,但是访问数据的平均效率低,需要对链表进行遍历.因此,Linked ...

  7. .netCore+Vue 搭建的简捷开发框架 (5)

    文章目录:.netCore+Vue 搭建的简捷开发框架--目录 上两节的内容介绍了一些关于.netCore 相关的一些基础知识.介绍这些的目的,最主要的还是为了我们的架构搭建服务. 上一节中,我们介绍 ...

  8. Unreal Engine 4 系列教程 Part 4:UI教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. mvc请求管道(一)

    一.前言 在平常做后台开发的时候,经常会说到请求管道,很多开发者都知道这个,也能说几句,可能没法详细的去介绍,今天就来详细的说一下这个. 二.到达IIS之前 请看下面这个流程图.从用户打开浏览器到请求 ...

  10. nishang的介绍与使用

    0x01前言 Nishang是一个PowerShell攻击框架,它是PowerShell攻击脚本和有效载荷的一个集合.Nishang被广泛应用于渗透测试的各个阶段,本文主要介绍如何使用Nishang的 ...