使用nvm安裝node與環境設定

Last updated on 

使用 nvm 安裝 node

首先，如果你的 ubuntu 系統裡已經安裝了 nodejs，請先移除：

Uninstall Node.JS using Linux command line? - Stack Overflow

sudo apt-get remove nodejs

然後安裝nvm

How to Update Node.js to Latest Version {Linux, Windows, and MacOS}

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm --version

列出目前系統上安裝的node版本：

nvm ls
       v10.24.1
->     v16.14.0
default -> v16.14.0
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.14.0) (default)
stable -> 16.14 (-> v16.14.0) (default)
lts/* -> lts/gallium (-> v16.14.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1
lts/erbium -> v12.22.10 (-> N/A)
lts/fermium -> v14.19.0 (-> N/A)
lts/gallium -> v16.14.0

列出遠端所有的版本：

nvm ls-remote

只列出 lts 版本：

nvm：安裝、切換不同 Node.js 版本的管理器 | Titangene Blog

nvm ls-remote --lts
       v14.16.1   (LTS: Fermium)
       v14.17.0   (LTS: Fermium)
       v14.17.1   (LTS: Fermium)
       v14.17.2   (LTS: Fermium)
       v14.17.3   (LTS: Fermium)
       v14.17.4   (LTS: Fermium)
       v14.17.5   (LTS: Fermium)
       v14.17.6   (LTS: Fermium)
       v14.18.0   (LTS: Fermium)
       v14.18.1   (LTS: Fermium)
       v14.18.2   (LTS: Fermium)
       v14.18.3   (LTS: Fermium)
       v14.19.0   (Latest LTS: Fermium)
       v16.13.0   (LTS: Gallium)
       v16.13.1   (LTS: Gallium)
       v16.13.2   (LTS: Gallium)
->     v16.14.0   (Latest LTS: Gallium)

安裝node

nvm install [version.number]

npm doctor

檢查目前的環境配置是否正確

執行

npm doctor

如果結果是這樣：

Check                               Value   Recommendation/Notes
npm ping                            ok
npm -v                              ok      current: v8.5.4, latest: v8.5.4
node -v                             ok      current: v16.14.0, recommended: v16.14.0
npm config get registry             ok      using default registry (https://registry.npmjs.org/)
which git                           ok      /usr/bin/git
Perms check on cached files         ok
Perms check on local node_modules   not ok  Check the permissions of files in /home/allenyl/Project/sentencing-system/frontend/node_modules (should be owned by current user)
Perms check on global node_modules  ok
Perms check on local bin folder     ok
Perms check on global bin folder    ok
Verify cache contents               ok      verified 663 tarballs

npm ERR! Some problems found. See above for recommendations.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/allenyl/.npm/_logs/2022-03-11T04_21_46_344Z-debug-0.log

中間有一項是 permission 問題，多半是node_modules權限設置不對。

改owner

chown username:username -R node_modules

改權限：

sh: 1: vue-cli-service: Permission denied · Issue #5210 · vuejs/vue-cli

chmod -R a+X node_modules
chmod -R a+rw node_modules

command line - Why do question mark characters appear when changing the permissions of directory? - Ask Ubuntu

To read a file, its read permission needs to be set. However, to read a directory and the listing of its files, both the read and the execute permissions need to be set. If they aren't, you get weird errors like the ones you're experiencing.

To set the read permission on files and the read and execute permissions on directories recursively, use this command:

chmod -R a+rX directoryname

Here's an explanation of that command:

  • chmod is the name of the command, use for changing the permissions of files.
  • -R is the recursive flag. It means apply this command to the directory, and all of its children, and of its children's children, and so on.
  • a stands for all: apply these permissions the owner of the file, the group owner of the file, and all other users.
  • + means add the following permissions if they aren't set already.
  • r means the read permission.
  • X means the execute permission, but only on directories. Lower-case x would mean the execute permission on both files and directories.

最後檢查結果應該要都ok

Check                               Value  Recommendation/Notes
npm ping                            ok
npm -v                              ok     current: v8.5.4, latest: v8.5.4
node -v                             ok     current: v16.14.0, recommended: v16.14.0
npm config get registry             ok     using default registry (https://registry.npmjs.org/)
which git                           ok     /usr/bin/git
Perms check on cached files         ok
Perms check on local node_modules   ok
Perms check on global node_modules  ok
Perms check on local bin folder     ok
Perms check on global bin folder    ok
Verify cache contents               ok     verified 663 tarballs

解決 npm npm does not support Node.js

參考官網的版本對應 https://nodejs.org/zh-cn/download/releases/ ，安裝對應版本的node跟npm

設定 default node version

node.js - How can the default node version be set using NVM? - Stack Overflow

如果發現 node 版本跟 npm 不匹配，安裝了新版的node之後，可以使用以下指令來指定預設使用的node版本：

nvm alias default v16.14.0

切換node版本

如果要暫時切換node版本，可輸入：

nvm use v10.6.3

移除node版本

nvm uninstall v10.6.3

參考：

nvm：安裝、切換不同 Node.js 版本的管理器
nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。
Titangene BlogTitangene

安裝serve 套件

安裝：

global

npm install -g serve@latest

local

npm install serve@latest

移除：

global

npm uninstall -g serve

local

npm uninstall serve

關於 package-lock.json

package-lock.json 文件

在 package.json 中，可以使用 semver 表示法设置要升级到的版本（补丁版本或次版本），例如：

  • 如果写入的是 〜0.13.0，则只更新补丁版本：即 0.13.1 可以，但 0.14.0 不可以。
  • 如果写入的是 ^0.13.0，则要更新补丁版本和次版本：即 0.13.1、0.14.0、依此类推。
  • 如果写入的是 0.13.0，则始终使用确切的版本。

当尝试使用 npm install 命令在另一台机器上复制项目时，如果指定了 〜 语法并且软件包发布了补丁版本，则该软件包会被安装。 ^ 和次版本也一样。

如果指定确切的版本，例如示例中的 0.13.0，则不会受到此问题的影响。

可能是你，或者是其他人，会在某处尝试通过运行 npm install 初始化项目。

因此，原始的项目和新初始化的项目实际上是不同的。 即使补丁版本或次版本不应该引入重大的更改，但还是可能引入缺陷。

package-lock.json 会固化当前安装的每个软件包的版本，当运行 npm install时，npm 会使用这些确切的版本。

package-lock.json 文件需要被提交到 Git 仓库，以便被其他人获取（如果项目是公开的或有合作者，或者将 Git 作为部署源）。

当运行 npm update 时，package-lock.json 文件中的依赖的版本会被更新。

npm 包管理器简介

运行任务

package.json 文件支持一种用于指定命令行任务（可通过使用以下方式运行）的格式：

npm run <task-name>

例如：

{
  "scripts": {
    "start-dev": "node lib/server-development",
    "start": "node lib/server-production"
  },
}

使用此特性运行 Webpack 是很常见的：

{
  "scripts": {
    "watch": "webpack --watch --progress --colors --config webpack.conf.js",
    "dev": "webpack --progress --colors --config webpack.conf.js",
    "prod": "NODE_ENV=production webpack -p --config webpack.conf.js",
  },
}

因此可以运行如下，而不是输入那些容易忘记或输入错误的长命令：

$ npm run watch
$ npm run dev
$ npm run prod

npm安装package.json中的模块依赖 - 前端[色色] - 博客园

1.package.json不存在时

运行命令: npm init可自动创建package.json文件

npm install

npm 包管理器简介

安装单个软件包

也可以通过运行以下命令安装特定的软件包：

npm install <package-name>

通常会在此命令中看到更多标志：

  • --save 安装并添加条目到 package.json 文件的 dependencies。
  • --save-dev 安装并添加条目到 package.json 文件的 devDependencies。

区别主要是，devDependencies 通常是开发的工具（例如测试的库），而 dependencies 则是与生产环境中的应用程序相关。

npm uninstall

卸载 npm 软件包

若要卸载之前在本地安装（在 node_modules 文件夹使用 npm install <package-name>）的软件包，则从项目的根文件夹（包含 node_modules 文件夹的文件夹）中运行：

npm uninstall <package-name>

如果使用 -S 或 --save 标志，则此操作还会移除 package.json 文件中的引用。

如果程序包是开发依赖项（列出在 package.json 文件的 devDependencies 中），则必须使用 -D 或 --save-dev 标志从文件中移除：

npm uninstall -S <package-name>
npm uninstall -D <package-name>

如果该软件包是全局安装的，则需要添加 -g 或 --global 标志：

npm uninstall -g <package-name>

例如：

npm uninstall -g webpack

可以在系统上的任何位置运行此命令，因为当前所在的文件夹无关紧要。