前端环境配置

date
Sep 10, 2022
slug
zvbgybab
status
Published
tags
前端
summary
对于前端开发的常用环境配置记录，说明配置文件、配置命令的使用
type
Post
 
本文记录前端开发的常用环境配置，最入门的是Node、Npm/Yarn的安装和配置。
Yarn现目前有2个版本，1.0作为npm的平替方案，所以本文中提到的Yarn均是指Yarn 1.0。

安装篇

nvm

nvm全名node.js version management，同等于nodejs的版本管理工具。当不同项目使用不同版本nodejs且不统一时，这时就用到nvm进行不同项目不同版本nodejs使用上的切换。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
支持Windows系统：nvm-windows

node

搜索远端支持的node版本：nvm ls-remote | grep v14.
安装指定的node版本：nvm install v14.20.0

npm

node已经内置集成了npm，在node安装好之后输入 npm -v，来测试是否成功安装。

yarn

官网地址，安装：
  • 脚本（推荐）：curl -o- -L https://yarnpkg.com/install.sh | bash，在 Mac、大部分 Linux 上都可直接使用。Windows可在页面上下载安装包
  • 依靠 npm：npm install --global yarn，不建议，特别是用nvm安装的node。
如果在Windows上通过npm安装的yarn，可能会遇到错误【yarn：无法加载文件xxxx，因为在此系统上禁止运行脚本】。

npx

npx 使用教程，如果有些包我们只会使用一次，或者只想尝试以下，不想安装到全局，也不想作为当前项目的依赖可以使用 npx 的方式来执行。
npx 是 npm 5.2+ 版本之后自带的工具，能够帮助我们更高效的执行 npm 软件仓库里的安装包。
$ npx create-react-app my-app

# 执行以上这条命令 npx 会按以下顺序工作：
# 1. 先查看当前项目有没 create-react-app
# 2. 如果当前项目找不到，会去全局查找 create-react-app
# 3. 如果全局还找不到，会帮我们临时从 npm 包仓库安装 create-react-app，不会污染到当前项目，也不会装到全局

nrm

nrm提供了一些最常用的npm源地址，也支持新增自定义源，能够让我们快速的切换安装包时候的源地址。

设置篇

一、配置文件

1、.npmrc文件
  • 项目级：在项目根目录下，如/project/.npmrc
  • 用户级：在用户根目录下，如Windows下是%USERPROFILE%/.npmrc，Mac下是$HOME/.npmrc
  • 全局级：在Node安装目录下，如$Node安装目录/etc/.npmrc
  • 内置级：在npm内置目录下，即/path/to/npm/.npmrc
优先级从上到下，逐步降低。常用的是项目级、用户级。
2、.yarnrc文件
.yarnrc有.npmrc的前面3个级别，但配置格式不一样，.yarnrc文件key和value中间空格隔开，字符串形式的key和value必须用引号引住。另外，.yarnrc配置文件不支持配置auth信息。
yarn构建时.yarnrc作为.npmrc的拓展，.npmrc的优先级更高，请看文件读取的顺序：
$ yarn --verbose
yarn install v1.22.19
verbose 0.223266208 Checking for configuration file "/Users/lei/workspace/blog-nobelium/.npmrc".
verbose 0.223850083 Checking for configuration file "/Users/lei/.npmrc".
verbose 0.223990083 Found configuration file "/Users/lei/.npmrc".
verbose 0.224618458 Checking for configuration file "/opt/homebrew/etc/npmrc".
verbose 0.225036708 Checking for configuration file "/Users/lei/workspace/blog-nobelium/.npmrc".
verbose 0.225161417 Checking for configuration file "/Users/lei/workspace/.npmrc".
verbose 0.225288542 Checking for configuration file "/Users/lei/.npmrc".
verbose 0.22538575 Found configuration file "/Users/lei/.npmrc".
verbose 0.225598542 Checking for configuration file "/Users/.npmrc".
verbose 0.228707333 Checking for configuration file "/Users/lei/workspace/blog-nobelium/.yarnrc".
verbose 0.228928833 Checking for configuration file "/Users/lei/.yarnrc".
verbose 0.229068417 Found configuration file "/Users/lei/.yarnrc".
verbose 0.229262167 Checking for configuration file "/opt/homebrew/etc/yarnrc".
verbose 0.229364 Checking for configuration file "/Users/lei/workspace/blog-nobelium/.yarnrc".
verbose 0.229457333 Checking for configuration file "/Users/lei/workspace/.yarnrc".
verbose 0.229537167 Checking for configuration file "/Users/lei/.yarnrc".
verbose 0.229609458 Found configuration file "/Users/lei/.yarnrc".
verbose 0.2297625 Checking for configuration file "/Users/.yarnrc".
verbose 0.236197708 current time: 2022-09-11T04:10:30.360Z
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.38s.
💡
推荐使用yarn作为npm的平替方案，但配置尽量放在.npmrc中。

二、命令设置

配置命令格式：
npm config set <key> <value>  // 给配置参数key设置值为value；
npm config get <key>          // 获取配置参数key的值；
npm config delete <key>       // 删除置参数key及其值；
npm config list [-l]      // 显示npm的所有配置参数的信息；
npm config edit     // 编辑配置文件
npm get <key>     // 获取配置参数key的值；
npm set <key> <value>    // 给配置参数key设置值为value；
1、查看当前设置
$ ~ npm config list
; cli configs
metrics-registry = "https://registry.npmmirror.com/"
scope = ""
user-agent = "npm/6.14.17 node/v14.20.0 darwin x64"

; userconfig /Users/lei/.npmrc
registry = "https://registry.npmmirror.com/"
scripts-prepend-node-path = true
strict-ssl = false

; node bin location = /Users/lei/.nvm/versions/node/v14.20.0/bin/node
; cwd = /Users/lei
; HOME = /Users/lei
; "npm config ls -l" to show all defaults.

$ ~ yarn config list
info yarn config
{
  'version-tag-prefix': 'v',
  'version-git-tag': true,
  'version-commit-hooks': true,
  'version-git-sign': false,
  'version-git-message': 'v%s',
  'init-version': '1.0.0',
  'init-license': 'MIT',
  'save-prefix': '^',
  'bin-links': true,
  'ignore-scripts': false,
  'ignore-optional': false,
  registry: 'https://registry.npmmirror.com',
  'strict-ssl': false,
  'user-agent': 'yarn/1.22.19 npm/? node/v14.20.0 darwin x64',
  'disable-self-update-check': true,
  lastUpdateCheck: 1661769178400,
  'scripts-prepend-node-path': true
}
info npm config
{
  'strict-ssl': false,
  registry: 'https://registry.npmmirror.com/',
  'scripts-prepend-node-path': true
}
2、设置源
# 源设置
$ npm config set registry https://npmmirror.com/mirrors/
$ yarn config set registry https://npmmirror.com/mirrors/
$ npm config get registry
$ yarn config get registry

$ npm config set registry https://npm.tech.sw/repository/npm-group/
$ yarn config set registry https://npm.tech.sw/repository/npm-group/
3、其他设置
更多请查看npm官方配置说明、yarn官方配置说明
# 设置身份验证时必须带上token。如果不设置，可能导致yarn在拉取部分私有源时失败
$ npm config set always-auth true

# 取消yarn的https证书校验
$ npm config set strict-ssl false
$ yarn config set strict-ssl false

# 取消yarn的自动更新检测
$ yarn config set disable-self-update-check true

© 刘德华 2020 - 2023