背景:
之前公司内部是使用的 verdaccio 作为私有前端 npm 仓库的工具的, 由于最近安装包时总是遇到问题, 发包 和 安装都比较慢, 不太确定具体是什么问题
几经解决还是没能够解决掉, 索性换一个工具试试, 公司后端的 maven 库私服是使用的 nexus, 找资料时发现 nexus 也是可以作为前端 npm 仓库来使用的, 配置后尝试了一下, 比起 verdaccio 在速度方面快很多, 发包、安装也都很顺利
部署
步骤:
-
使用有管理权限的账号登录 nexus;
-
创建包存储空间, 顶部小齿轮–Repository–Blob Stores–Create blob store
-
顶部小齿轮–Repository–Repositories–Create repository;
创建3个仓库: 1个存放私有包的仓库, 1个(或多个)代理外部源的仓库, 1个包含前两个仓库的仓库组
3.1 选择 npm (hosted) – 填写 仓库名称-- 选择存储空间
3.2 选择 npm (proxy) – 填写 仓库名称-- 填写代理地址 --选择存储空间
3.3 选择 npm (group) – 填写 仓库名称–选择存储空间 – 将 3.1、3.2 创建的两个包加入到这个组中
-
创建一个 npm 用户的角色, Security – Roles – Create role – 填写 角色id – 填写角色名称 – 搜索 npm – 根据自己需要加入相应的权限, 可以建多个进行更细粒度的权限管理
-
创建npm 用户, Security – Users – 用户基本信息 – 选择4 创建的角色
-
添加npm 认证, Security – Realms – 将 npm Bearer Token Realm 移到右侧
-
客户端使用 nrm (推荐) 或者直接跟 --registry=https://xxx.com/repository/[自己的仓库名称]/ 切换npm 源地址, 具体地址可以在 Repositories 中找到仓库点开查看
-
发包:
8.1 npm login – 输入 5 中创建的用户信息
8.2 npm publish
常用命令
① 初始化项目
新创建一个文件夹,使用CMD工具 cd 到该文件夹下,使用npm init 命令初始化生成一个新的 package.json 文件。它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
如果使用了 -f(代表 force)、-y(代表 yes),则跳过提问阶段,直接生成一个新的 package.json 文件。
npm init
npm init -y //直接略过所有问答,全部采用默认答案
命令行里会以交互的形式让你填一些项目的介绍信息,依次介绍如下:
name 项目名称
version 项目的版本号
description 项目的描述信息
entry point 项目的入口文件
test command 项目启动时脚本命令
git repository 如果你有 Git 地址,可以将这个项目放到你的 Git 仓库里
keywords 关键词
author 作者叫啥
license 项目要发行的时候需要的证书,平时玩玩忽略它
② 设置环境变量。
npm set init-author-name 'Your name'
npm set init-author-email 'Your email'
npm set init-author-url 'http://yourdomain.com'
npm set init-license 'MIT'
上面命令等于为 npm init 设置了默认值,以后执行 npm init 的时候,package.json 的作者姓名、邮件、主页、许可证字段就会自动写入预设的值。这些信息会存放在用户主目录的 ~/.npmrc 文件,使得用户不用每个项目都输入。如果某个项目有不同的设置,可以针对该项目运行 npm config。
③ 查看每个模块的具体信息
npm info underscore
④ 搜索 npm 仓库,它后面可以跟字符串,也可以跟正则表达式
npm search <搜索词>
⑤ 以树形结构列出当前项目安装的所有模块,以及它们依赖的模块
npm list
# 加上 global 参数,会列出全局安装的模块
npm list -global
# npm list 命令也可以列出单个模块
npm list underscore
⑥ 安装模块
# npm 在默认情况下会从 http://npmjs.org 搜索或下载包,将包安装到当前目录的 node_modules 子目录下
npm install # 根据package.json配置文件中的依赖配置下载安装依赖到当前项目的 node_modules 目录下
npm i # 简写
npm install [package_name] # 下载依赖包,例如:npm install jquery
# 后缀:
-global或-g # 全局安装,安装后的包位于全局目录下
--save或-S # 安装的包将写入package.json里面的dependencies,dependencies:生产环境需要依赖的库
--save-dev或-D # 安装的包将写入packege.json里面的devDependencies,devdependencies:只有开发环境下需要依赖的库
⑦ 卸载模块
# 卸载全局包
npm uninstall <package> -g
# 卸载本地
npm uninstall <package> -S, --save # Package will be removed from your dependencies.
npm uninstall <package> -D, --save-dev # Package will be removed from your devDependencies.
⑧ 启动模块
npm start会执行scripts里的start字段。 如果没有start字段则执行node server.js。
# 启动模块
npm start [-- <args>]
# 重新启动模块
npm restart [-- <args>]
# 停止模块
npm stop [-- <args>]
⑨ 执行在 package.json 中 scripts 属性下定义的脚本
# 例如执行npm run dev 时,系统就会跑到package.json文件中执行scripts中对应的脚本
npm run [<args>]
npm 安装模块分全局和本地两种:
①本地安装
将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
可以通过 require() 来引入本地安装的包。
# 本地安装
npm install <package name>
②全局安装
将安装包
- 放在 /usr/local 下或者你 node 的安装目录。
- 可以直接在命令行里使用。
# 全局安装
npm install -global <package name>
npm install -g <package name>
安装之前,npm install 会先检查,node_modules 目录之中是否已经存在指定模块。如果存在,就不再重新安装了,即使远程仓库已经有了一个新版本,也是如此。如果你希望,一个模块不管是否安装过, npm 都要强制重新安装,可以使用 -f 或 –force 参数。
npm install <packageName> --force
使用淘宝 NPM 镜像
npm默认的仓库地址是在国外网站,速度较慢,这里有两种方法,可以切换到国内的淘宝镜像。
① nrm(可选)
nrm是切换npm源很简单方便的工具,跟其他工具一样,第一步进行全局安装:
npm install nrm -g
nrm 几条常用的命令:
nrm ls # 查看可选的源列表:
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
nrm test # 查看每个源的响应时间(仅做参考):
npm ---- 758ms
cnpm --- 212ms
* taobao - 105ms
nrm use taobao # 切换源(前面*号表示正在使用的源)
nrm add # 添加源
nrm del # 删除源
② 安装cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm命令了。
$ cnpm install [name]
yarn
Yarn是facebook发布的一款取代npm的包管理工具。
使用npm安装yarn
npm install yarn -g
配置环境变量
将yarn的bin目录路径配置到环境变量的Path中。
更改yarn的包全局命令
yarn config set global-folder "路径"
yarn config set cache-folder "路径"
查看是否更改成功
yarn global dir
常用命令
① 查看版本
yarn --version
② 初始化项目
yarn init
③ 添加依赖包
# 添加依赖包
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
# 安装所有的依赖包
yarn
yarn install
④ 升级依赖包
# 升级依赖包
yarn upgrade # 用于更新包到基于规范范围的最新版本
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
⑤ 移除依赖包
yarn remove [package]
⑥ 启动模块
yarn start
yarn start dev
⑦ 执行在 package.json 中 scripts 属性下定义的脚本
# 运行指定的 [script]
yarn run [script] [<args>]
Webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
安装
# 全局安装
npm install webpack -g
# 安装到你的项目目录
npm install webpack --save
使用npm私有仓库
修改镜像源
a.清除工程原镜像源
npm config rm registry
b.添加新的nexus镜像源
npm config set registry=http://xxxxxxxxxxxxxx:8081/repository/npm-group/
c.删除原始缓存
手动删除node_modules
d.重新构建
npm update
npm install
e.查看是否已使用最新的私有仓库(如果打印的是设置的registry就是成功了)
npm get registry (或 npm config ls)
f.其他途径验证是否是私有仓库
点击package-lock.json---->查看resolved字段的值是不是 http://xxxxxxxxxxxxx:8081/repository/npm-group/xxxxxxxxxx 如果是,就是对的
项目根目录下配置.npmrc文件
registry=http://xxxxxxxxxxxxx:8081/repository/npm-group/
配置文件.npmrc优先级
电脑系统中可能会存在多个.npmrc文件,在我们安装依赖包时,npm会按照如下顺序读取配置文件,也就是优先级;
项目配置文件: /project/.npmrc
用户配置文件:~/.npmrc
全局配置文件:/etc/npmrc
配置.npmrc
.npmrc文件里面以key=value的格式进行配置;
代理设置
- 先清除掉以前的代理设置
npm config set proxy null
npm config set https-proxy null
npm config delete proxy
npm config delete https-proxy
也可以先通过以下代码查看代理设置,如果返回null那就不需要清理。
npm config get proxy
npm config get https-proxy
- 重新设置
npm config set registry http://registry.cnpmjs.org/
npm config set registry "http://registry.npmjs.org/"
或者安装一下cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
其他
npm设置代理
设置代理
npm config set proxy=http://127.0.0.1:8087
npm config set registry=http://registry.npmjs.org
关于https
经过上面设置使用了http开头的源,因此不需要设https_proxy了,否则还要增加一句:
npm config set https-proxy http://server:port
代理用户名和密码
npm config set proxy http://username:password@server:port
npm confit set https-proxy http://username:password@server:port
原文链接:使用 nexus 作为 npm 私服
原文链接:NPM安装及配置
原文链接:npm安装hexo报错FetchError,代理127.0.0.1:1080问题