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. 使用golang插入mysql性能提升经验

    前言 golang可以轻易制造高并发,在某些场景很合适,比如爬虫的时候可以爬的更加高效.但是对应某些场景,如文件读写,数据库访问等IO为瓶颈的场合,就没有什么优势了. 前提基础 1.golang数据库 ...

  2. springboot项目目录结构

    idea新建springboot项目 按默认下一步至完成,默认目录结构如下 pom.xml文件内容如下 <?xml version="1.0" encoding=" ...

  3. java中List、Set和Map三个接口及其主要实现类

    三个接口都在java.util包下 List与Set具有相似性,它们都是单列元素的集合,所以,它们有一个共同的父接口,叫Collection,Map没有继承Collection接口 1.List接口: ...

  4. 决策树算法系列之一 ID3

    1 什么是决策树 通俗来说,决策树分类的思想类似于找对象 一个女孩的母亲要给这个女孩介绍男朋友 (分类问题.见或不见) 女孩有自己的一套标准 长相 收入 职业 见面与否 丑 高 某箭队经理 不见 中等 ...

  5. DJango配置mysql数据库以及数据库迁移

    DJango配置mysql数据库以及数据库迁移 一.Django 配置MySQL数据库 在settings.py中配置 import pymysql # 配置MySQL pymysql.install ...

  6. shark恒破解笔记1-壳内寻找注册码

    记录学习shark恒大教程的学习记录 壳内寻找注册码 OD打开 明显有壳 F9先运行程序 2.Ctrl+G输入401000到解码段,如果出现db ** 说明已经解码过,脱离了程序本身的壳 鼠标右键-& ...

  7. node.js当中的http模块与url模块的简单介绍

    一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务 ...

  8. [BZOJ3813] 奇数国 - 线段树

    3813: 奇数国 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 912  Solved: 508[Submit][Status][Discuss] ...

  9. win10下安装openssl

    1.下载运行工具:ActivePerl-5.22.1.2201-MSWin32-x64-299574.msi, 安装. 2.执行:perl example.pl,若显示“Hello from Acti ...

  10. JetBrains系列软件激活码

    T3ACKYHDVF-eyJsaWNlbnNlSWQiOiJUM0FDS1lIRFZGIiwibGljZW5zZWVOYW1lIjoi5bCP6bifIOeoi+W6j+WRmCIsImFzc2lnb ...