我的NPM最佳实践

我心飞翔 分类:javascript

这是我参与更文挑战的第三天,活动详情查看:更文挑战

npm 为开发者打开了连接整个 JavaScript 世界的一扇大门。它是世界上最大的软件依赖仓库,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。

本文是我在工作中的常见 NPM 操作,希望能帮助到大家

NPM 与 Yarn 的常用命令对比

操作 NPM Yarn
安装全局依赖 npm install [package] -g yarn global add [package]
安装生产环境依赖 即添加到 devdependencies 中 npm install [package] --savenpm install [package] yarn add [package]
安装开发环境依赖 即添加到 devDependencies 中 npm install [package] --save-dev yarn add [package] --dev
添加依赖到 peerDependencies 中 npm install [package] --peer yarn add [package] --peer
添加到 optionalDependencies 中 npm install [package] --optional yarn add [package] --optional
卸载全局依赖 npm uninstall [package] -g yarn remove global [package]
卸载项目内依赖 npm uninstall [package] yarn remove [package]

yarn/npm 淘宝镜像设置

yarn/npm 安装依赖的官方地址都在国外(慢),我们可以设置成国内的淘宝镜像,以便提高安装速度

npm 淘宝镜像与官方镜像的切换

# 设置为淘宝源
$ npm config set registry http://registry.npm.taobao.org/

# `上面的命名运行结束后,我们需要验证是否设置成功,可以执行下面的命令`

# 查看当前配置的镜像
$ npm get registry
 

如果打印出淘宝的地址,则说明设置成功,我们可以更快的安装依赖了。

但是有时候我们还是需要将镜像设置 npm 官方镜像,比如:发布 NPM 包的时候

# 设置 NPM 官方镜像
$ npm config set registry https://registry.npmjs.org/
 

yarn 淘宝镜像与官方镜像的切换

# 设置为淘宝源
$ yarn config set registry https://registry.npm.taobao.org -g

# `上面的命名运行结束后,我们需要验证是否设置成功,可以执行下面的命令`

# 查看当前配置的镜像
$ yarn config  get registry
 
# 设置 yarn 官方镜像
yarn config set registry https://registry.yarnpkg.com
 

发布以@开头命名的 public 公有包

@angular@ionic 他们的包, 都可以以@开头,为啥我的不可以,原来 angularionic 都属于一个组织(Organization)

只有新创建一个 组织(Organization)之后,才能创建@testorg/testpackname 这样的包

如何在 NPM 中新建组织

第一步,点击头像处的add organization

npm-add-org-1

下一步,输入要创建的组织名称

注意: 组织名称需要取一个独一无二的有效名称,否则会提示 名称无效

npm-add-org-2

NPM 设置为官方镜像

npm config set registry https://registry.npmjs.org/
 

修改本地项目包的名称

注意 npm 对包名的限制:不能有大写字母/空格/下滑线!
不能和 NPM 网站中已有的包名字重名!

修改 package.json文件, name 的名称以@开头

{
  "name": "@orgname/xxxxxxx",
  "version": "0.0.1"
}
 

orgname 替换成你的 NPM 网站中创建的组织名称

version 规范

参考语义化版本 2.0.0

version 具体体现为::"x.y.z"

  1. 修复 bug,小改动,增加 z
  2. 增加了新特性,但仍能向后兼容,增加 y
  3. 有很大的改动,无法向后兼容,增加 x

将组织名称添加到本地账户

在发布之前,我们需要把 NPM 远程对应的组织加入到本地账户中,这样才能确保你有足够的权限发布包

npm adduser --scope=@orgname
 

orgname 替换成你的 NPM 网站中创建的组织名称

然后会提示你输入 NPM 网站中的账号,密码,邮箱 📮.

发布

发布前的注意事项:

  1. 只能发布 public 公有的包

检查 package.json内的 private字段不能为true

{
  "private": false
}
 
  1. 在发包前可以通过 npm 的搜索引擎查找是否已存在相同名称的包

    发布之前去官方搜索你的库的名称。如果有同名的库, 则需要换一个名字,否则无法发布成功

  2. 每次发布的版本号不能一样

    每次发布的时候,需要新增一个版本号,否则无法正常发布

    最后执行下面的命令进行发布

npm publish --access public
 

发布效果截图

删除/撤销 NPM 远程包

我们使用npm unpublish [pack] --force 来撤销已发布的包

下面是一个例子:删除 nsuedu组织下的nsuedu-cli

npm unpublish @nsuedu/nsuedu-cli --force
 

注意:

即使你撤销了发布的包,发包的时候也不能再和被撤销的包的名称和版本重复了(即不能名称相同,版本相同,因为这两者构成的唯一标识已经被“占用”了)

例如撤销包后尝试再发布同一名称+同一版本的包 会报错,并建议修改包的版本和名称

npm unpublish的推荐替代命令:

npm deprecate <pkg>[@<version>] <message>

使用这个命令,并不会在社区里撤销你已有的包,但会在其他人尝试安装这个包的时候得到警告: 提示这个包已经不再维护了


如何更新 NPM 依赖

参考文档: www.carlrippon.com/upgrading-n…

查看哪些依赖包需要更新

npm outdated
 

安装最新版本, package替换成自己的包即可

npm install @package@latest
 

修改 npm 用户的默认头像

npm 网站使用 Gravatar 头像库。

注册好后,如果想修改默认头像:

  1. 点击页面右上角头像-> Profile Settings,进入个人设置页面
  2. 点击头像下面的 Change Your Gravatar 进入 Gravatar 网站,如果没有账号请注册一个账号。
  3. https://en.gravatar.com/ 中选择 My Gravatars
  4. 添加邮箱: 点击 Add email address,输入注册 npm 账号的邮箱,然后点击 Add.
  5. 添加头像图片:点击 Add a new image,如果图片在电脑上那么选择 Upload new,选择一张图片,点击 Next,修剪一下图片,
  6. 点击 Crop Image,选择一个图片级别,G 表示所有人都能看,
  7. 然后点击 Set Rating, 然后点击 Do not use this image yet.
  8. 给邮箱添加头像:点击一下邮箱,然后点击需要的头像,然后会出现一个弹窗,点击 Confirm,稍等一会即可完成。

npm 网站用户头像同步需要稍等一会才能看见。

node-pre-gyp 安装报错解决

$ yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-pre-gyp -g
 

Mac 下解决 NPM install 权限问题

Mac 系统安装 node.js 后自带的 npm 被安装到 usr/local/下面,这样执行 npm install 时经常有权限问题。
虽然使用 sudo 可以安装,但是当使用 npx 等工具时还是会有问题。所以最好还是将 global 目录移动。

查看当前 npm 全局安装位置

$ npm config get prefix
/usr/local
 

在用户目录下建立一个新的目录

mkdir ~/.npm-global
 

设置为 npm 全局的 prefix

npm config set prefix '~/.npm-global'
 

修改~/.profile环境变量文件(如果没有就创建一个)

vi ~/.profile
 

加入如下内容

export PATH="~/.npm-global/bin:$PATH"
 

更新环境变量

source ~/.profile
 

检查是否设置成功(与第一步进行对比)

npm config get prefix
 

此后,使用 npm install -g 安装的模块会被安装到~/.npm-global

~/.npm-global 也会包含 binlib 目录,其中 lib 目录中包含 node_modules

重新安装 npm

为了测试是否配置成功,我们不使用sudo重新安装全局的npm

npm install npm@latest -g
 

安装成功后就可以删除/usr/local/lib/node_modules/usr/local/bin/npm了。

sudo rm -rf /usr/local/lib/node_modules
sudo rm -rf /usr/local/bin/npm
 

检查一下已安装的全局包

npm list -g --depth 0
/Users/clj/.npm-global/lib
└── npm@7.11.1
 

修改 zsh 的环境变量文件

vi ~/.zshrc
 

加入如下内容

source ~/.bash_profile
source ~/.profile
 

保存并退出后再次更新环境变量

source ~/.zshrc
 

参考文档:

  • Resolving EACCES permissions errors when installing packages globally

最后

文章浅陋,欢迎各位看官评论区留下的你的见解!

觉得有收获的同学欢迎点赞,关注一波!

good

往期文章

  • 写给初学者的 Node 包管理器教程:什么是 npm?
  • 了解 JavaScript 模块系统的基础知识,并建立自己的库 🍜
  • 如何通过 Git 和 Husky 添加提交钩子并实现代码任务自动化
  • 前端业务组件库技术实现的三个关键点

回复

我来回复
  • 暂无回复内容