我的NPM最佳实践

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

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

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

NPM 与 Yarn 的常用命令对比

操作	NPM	Yarn
安装全局依赖	npm install [package] -g	yarn global add [package]
安装生产环境依赖 即添加到 devdependencies 中	npm install [package] --save或npm 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 他们的包， 都可以以@开头，为啥我的不可以，原来 angular、ionic 都属于一个组织（Organization）

只有新创建一个 组织（Organization）之后，才能创建@testorg/testpackname 这样的包

如何在 NPM 中新建组织

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

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

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

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
}
复制代码

2. 在发包前可以通过 npm 的搜索引擎查找是否已存在相同名称的包

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

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

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

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

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 也会包含 bin 和 lib 目录，其中 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

最后

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

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

往期文章

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