Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • 技术文档

  • GitHub

  • Nodejs

    • 打造属于自己的项目脚手架工具
    • node 和 npm 常见问题
    • node 和 npm 简介
      • node
        • Windows 安装 node
        • Mac 使用 Homebrew 安装 node
      • 列出所有全局模块
      • 基于 node 工程
        • 包(项目, 工程)
        • npm 获取配置有 6 种方式, 优先级由高到底.
        • 针对 npm 配置的命令行操作
        • npm 命令详解
        • 淘宝镜像
        • yarn Facebook 开发的包管理工具
      • 参考资料
    • 手搓一个 TinyPng 压缩图片的脚手架
    • node 监听文件夹并处理
    • 相对路径转别名路径之 chokidar
  • Chrome

  • VSCode

  • VSCode 更新文档

  • Other

  • 技术
  • Nodejs
Henry
2017-08-03
目录

node 和 npm 简介

node 和 npm 简介

# node

# Windows 安装 node

  • 在 Node.js 官网 (opens new window)下载 node . 一般我们选择 LTS 版本的, 因为这个相对稳定一些
  • 先在电脑创建 D:\nodejs 目录, 并将 Node 安装在这个目录中, 前辈说装在 C 盘会有权限的问题. 该引导步骤会将 node.exe 文件安装到你指定目录下, 并将该目录添加进 PATH 环境变量
  • 安装好之后, 在 cmd 控制台输入: node -v , 控制台打印出版本表示安装成功.
  • 由于新版的 nodejs 已经集成了 npm , 所以 npm 也一并安装好了. 同样可以使用 cmd 命令行输入: npm -v 来测试是否成功安装. 出现版本提示表示安装成功.

# Mac 使用 Homebrew 安装 node

# 列出所有全局模块

通过 npm list -g(简写: npm ls -g) 可以列出所有已经安装的全局模块

F:\>npm list -g
D:\nodejs\node_global
+-- express@4.15.3
| +-- accepts@1.3.3
| | +-- mime-types@2.1.16
| | | `-- mime-db@1.29.0
| | `-- negotiator@0.6.1
| +-- array-flatten@1.1.1
| +-- content-disposition@0.5.2
| +-- content-type@1.0.2
  ........................
`-- less@2.7.2
  +-- errno@0.1.4
  | `-- prr@0.0.0
  +-- graceful-fs@4.1.11
  +-- image-size@0.5.5
  +-- mime@1.3.6
  +-- mkdirp@0.5.1
  | `-- minimist@0.0.8
  +-- promise@7.3.1
  ........................
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

但是, 得到的输出信息会很冗长, 我们可以加上 --depth=0 来精简一下输出

F:\>npm list -g --depth=0
D:\nodejs\node_global
+-- express@4.15.3
`-- less@2.7.2
1
2
3
4

现在输出信息就清楚了, 我们只列出了我们安装的模块和版本号

# 基于 node 工程

# 包(项目, 工程)

# 概念

  1. 在 Node.js 语言中, 包和模块并没有本质的不同, 包是在模块的基础上更深一步的抽象.
  2. 包将某个独立的功能封装起来,用于发布、更新、依赖管理和进行版本控制。
  3. Node.js 根据 CommonJS 规范实现了包机制, 开发了 npm 来解决包的发布和获取需求.

# 包的说明文件(package.json)

使用 package.json 能干什么

  1. 相当于你本地项目的一个文档说明。
  2. 允许你指定你项目中所使用的 node 包的版本.
  3. 构建你的项目更加容易,便于给其他人共享。

package.json 属性详解

  • 本质: json 对象

    {
      "name": "npm_command", // 包名, 全部小写,没有空格,可以使用下划线或者横线
      "version": "1.0.0", // 版本, x.x.x 的格式, 符合“语义化版本规则”
      "scripts": {
        // 配置 npm 运行命令
        "start": "node bin/www"
      },
      "dependencies": {
        // 运行依赖的包
        "jquery": "^3.2.1"
      },
      "devDependencies": {
        // 开发依赖的包
        "babel": "^6.23.0"
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
  • 其他内容:

    description:描述信息,有助于搜索
    main: 入口文件,一般都是 index.js
    scripts:支持的脚本,默认是一个空的 test
    keywords:关键字,有助于在人们使用 npm search 搜索时发现你的项目
    author:作者信息
    license:默认是 MIT
    bugs:当前项目的一些错误信息,如果有的话
    
    1
    2
    3
    4
    5
    6
    7
  • 我们可以为 init 命令设置一些默认值, 比如:

    npm set init.author.email "henrytsz@qq.com"
    npm set init.author.name "henrytsz"
    npm set init.license "MIT"
    
    1
    2
    3
  • Semantic versioning(语义化版本规则) (opens new window):

dependencies 的内容, 以 "weex-HTML5": "^0.3.2" 为例, 我们知道 key 是依赖的包名称, value 是这个包的版本. 那版本前面的 ^ 或者版本直接是一个 * 是什么意思呢?

这就是 npm 的 Semantic versioning , 简称 Semver , 中文含义即"语义化版本规则". 如果一个项目打算与别人分享, 应该从 1.0.0 版本开始. 以后要升级版本应该遵循以下标准:

  • 补丁版本: 解决了 Bug 或者一些较小的更改, 增加最后一位数字, 比如 1.0.1
  • 小版本: 增加了新特性, 同时不会影响之前的版本, 增加中间一位数字, 比如 1.1.0
  • 大版本: 大改版, 无法兼容之前的, 增加第一位数字, 比如 2.0.0
  • 作为使用者, 我们可以在 package.json 文件中写明我们可以接受这个包的更新程度(假设当前依赖的是 1.0.4 版本):

    • 如果只打算接受补丁版本的更新(也就是最后一位的改变), 就可以这么写:

      • 1.0
      • 1.0.x
      • ~1.0.4
      • 波浪线可以管理三级版本
    • 如果接受小版本的更新(第二位的改变), 就可以这么写:

      • 1
      • 1.x
      • ^1.0.4
      • 向上的尖括号可以管理二级,三级版本
    • 如果可以接受大版本的更新(自然接受小版本和补丁版本的改变), 就可以这么写:

      • *
      • x
  • npm(包管理工具) - 详述:

    1. Node 包管理器( npm )是一个由 Node.js 官方提供的第三方包管理工具,
    2. npm 是一个完全由 JavaScript 实现的命令行工具, 通过 Node.js 执行, 因此严格来讲它不属于 Node.js 的一部分.
    3. 在最初的版本中, 我们需要在安装完 Node.js 以后手动安装 npm . 但从 Node.js 0.6 开始, npm 已包含在发行包中了, 安装 Node.js 时会自动安装 npm . 现在的版本大都使用 6.0 以上

具体详情可查看: package.json 知多少? (opens new window), NPM 如何管理依赖包版本 (opens new window), npm install 原理分析 (opens new window)

# npm 获取配置有 6 种方式, 优先级由高到底.

  1. 命令行参数.  --proxy http://server:port 即将 proxy 的值设为 http://server:port .

  2. 环境变量. 以 npm_config_ 为前缀的环境变量将会被认为是 npm 的配置属性. 如设置 proxy 可以加入这样的环境变量 npm_config_proxy=http://server:port .

  3. 用户配置文件. 可以通过 npm config get userconfig 查看文件路径. 如果是 mac 系统的话默认路径就是 $HOME/.npmrc .

  4. 全局配置文件. 可以通过 npm config get globalconfig 查看文件路径.mac 系统的默认路径是 /usr/local/etc/npmrc .

  5. 内置配置文件。安装 npm 的目录下的 npmrc 文件。

  6. 默认配置。 npm 本身有默认配置参数,如果以上 5 条都没设置,则 npm 会使用默认配置参数。

# 针对 npm 配置的命令行操作

npm config set <key> <value> [--global]
npm config get <key>
npm config delete <key>
npm config list
npm config edit
npm get <key>
npm set <key> <value> [--global]
1
2
3
4
5
6
7

在设置配置属性时属性值默认是被存储于用户配置文件中, 如果加上 --global , 则被存储在全局配置文件中.

如果要查看 npm 的所有配置属性(包括默认配置), 可以使用 npm config ls -l .

如果要查看 npm 的各种配置的含义, 可以使用 npm help config .

# npm 命令详解

  • 常用命令:

    • npm init : 生成 package.json
    • npm init --yes (简写: npm init -y ): 跳过回答问题步骤, 直接生成默认值的 package.json 文件. 使用此方法时, 文件夹名字必须符合 package.json 的 name 命名规范
    • npm view packageName versions: 查看 npm 服务器上所有的 packageName 版本信息
    • npm view packageName version: 查看 npm 服务器上最新的 packageName 版本信息
    • npm info packageName : 显示包的信息
    • npm install (简写: npm i ): 用来安装 package.json 里的相关依赖包( dependencies 和 devDependencies 里的所有模块)
    • npm install --production : 只安装 dependencies 中的内容
    • npm install packageName --global (简写: npm i -g packageName ): 全局安装
    • npm install packageName --save (简写: npm i -S packageName ): 局部安装运行依赖
    • npm install packageName@version --save : 安装指定版本的包(局部安装)
    • npm install packageName --save-dev (简写: npm i -D packageName ): 局部安装开发依赖
    • npm list -g (简写: npm ls -g): 列出全局安装的模块的详细信息
    • npm list -g --depth=0 (简写: npm ls -g --depth=0): 列出全局安装的模块简略信息
    • npm list packageName (简写: npm ls packageName): 查看本地安装的 packageName 版本信息
    • npm rm packageName --save : 移除包并删除依赖
    • npm config set prefix "E:\nodejs\node_global" : 设置全局模块安装地址
    • npm config get prefix : 获取全局安装包的所在地址, 并且可见对应的 cmd 命令
    • npm config set registry https://registry.npm.taobao.org : 设置 npm 库
    • npm config get registry : 查看 npm 库地址
    • npm config set proxy http://example@proxymsn.com : 设置代理地址
    • npm config get proxy : 查看代理地址
    • npm outdated : 检查依赖的包是否有新版本
    • npm update packageName : 更新指定依赖的包(如更新失败, 需要检查 package.json 中语义化版本规则, 能否从当前版本升级到最新版本)
    • npm update : 更新所有有新版本的包
  • 阮一峰-npm 模块管理器 (opens new window)

  • 使用 npm 导致的问题

    • 下载慢, 甚至下载不了

# 淘宝镜像

  • cnpm (淘宝镜像)

    • 将 npm 上的包同步更新到淘宝镜像上, 目前是每 10 分钟同步一次.
    • 配置: npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 常用命令: 使用 cnpm 代替 npm 即可
    • 问题:
      • 会多下载一些文件/文件夹
      • 严重者会导致 webstorm 瘫痪, 就像帕金森综合征
  • 修改 npm 的下载指向地址:
    • 配置默认镜像仓库: npm config set registry "https://registry.npm.taobao.org"
    • 只本次安装使用: npm --registry https://registry.npm.taobao.org install
    • 获取当前的下载指向地址: npm config get registry

# yarn Facebook 开发的包管理工具

  • yarn (包管理工具)

    • yarn 是 Facebook 开源的新的包管理器, 可以用来代替 npm
    • 配置: npm install yarn -g
    • 特点: 有缓存, 没有自己的仓库地址
    • 常用命令
      yarn --version
      yarn
      yarn init
      yarn global package (全局安装)
      yarn add package (局部安装)
      yarn add package --dev
      yarn remove package
      yarn list
      
      1
      2
      3
      4
      5
      6
      7
      8
  • 地址: https://yarnpkg.com/zh-Hans/
  • cyarn

    • 使用淘宝镜像, 更快

    • 配置: npm install cyarn -g --registry "https://registry.npm.taobao.org"

    • 常用命令: 将 yarn 使用 cyarn 代替即可

# 参考资料

  • Node.js 常用命令 (opens new window)
  • npm 命令配置技巧 - 简书 (opens new window)
  • Npm的配置管理及设置代理 - 黄博文 - 博客园 (opens new window)
  • npm镜像地址切换 - zeapane的个人空间 - OSCHINA (opens new window)
编辑 (opens new window)
#node#npm
上次更新: 5/27/2023, 1:02:05 PM
node 和 npm 常见问题
手搓一个 TinyPng 压缩图片的脚手架

← node 和 npm 常见问题 手搓一个 TinyPng 压缩图片的脚手架→

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式