「工程篇」 工程化之命令行 npm nvm npx yarn

在进入正题之前让我们先了解一下前端工程化:

  • 代码规范:保证团队所有成员以同样的规范开发代码。
  • 分支管理:不同的开发人员开发不同的功能或组件,按照统一的流程合并到主干。
  • 模块管理: 一方面,团队引用的模块应该是规范的。另一方面,必须保证这些模块可以正确的加入到最终编译好的包文件中。(以上两点可以总结为模块化或者组件化开发。)
  • 自动化测试:为了保证和并进主干的代码达到质量标准,必须有测试,而且测试应该是自动化的,可以回归的。
  • 构建:主干更新以后,自动将代码编译为最终的目标格式,并且准备好各种静态资源。
  • 部署: 将构建好的代码部署到生产环境。

随着 web 应用规模越来越大,模块/组件化开发的需求就显得越来越迫切,随着Node.js 的问世,意味着前端发展迈进了大前端时代。

NPM

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

(本文不对 npm 指令一一罗列,只介绍容易混淆的指令,想了解更多指令,请前往 npm 官网:https://www.npmjs.com/ )。

脚本命令集 npm script

package.json 文件中的 script 字段是一个对象,它们每一个属性对应一段脚本比如:start 命令对应的脚本是 webpack-dev-server --open(向 npm 脚本传入参数要使用 -- 表明)。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --open",
  "watch": "webpack --watch",
  "server": "node server.js",
  "build": "webpack"
},

初始化 npm init -y / npm init -f

npm init -y / npm init -f
# -y (yes)
# -f (force)
# 项目初始化时,跳过询问阶段

命令 npm run

使用不带参数的 npm run,命令行会列觉出 package.json 里所有的 script 脚本命令及内容。

npm run 会创建一个新的 shell 执行指定的命令,并将 node_modules/.bin 加入 PATH 变量,当脚本内容结束,则子 shell 关闭,回到父 shell 中。

由于 npm 脚本的唯一要求就是可以在 Shell 执行,因此它不一定是 Node 脚本,任何可执行文件都可以写在里面。

npm 脚本的退出码,也遵守 Shell 脚本规则。如果退出码不是0,npm 就认为这个脚本执行失败。

# 执行顺序:
npm run xx & npm run xxx   # 同时并行执行
npm run xx && npm run xxx  # 前一个执行成功,再执行最后一个npm i

向npm run xx 传入参数必须用 -- 表明。

命令 npm install <name>

npm install <name>
# 1. 安装模块到项目 node_modules 目录下。
# 2. 不会将模块依赖写入 devDependencies 或 dependencies 字段。
# 3. 运行 npm install 初始化项目时不会下载模块。

命令 npm install <name> -g

npm install <name> -g
# 1. 安装模块到全局,不会在项目 node_modules 目录中保存模块包。
# 2. 不会将模块依赖写入 devDependencies 或 dependencies 字段。
# 3. 运行 npm install 初始化项目时不会下载模块。
# 4. 可以在命令行中直接使用。

命令 npm install <name> --save

npm install <name> --save
# 1. 安装模块到项目 node_modules 目录下。
# 2. 会将模块依赖写入dependencies 字段。
# 3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
# 4. 运行npm install --production 或者注明 NODE_ENV 变量值为 production 时,会自动下载模块到 node_modules 目录中。

命令 npm install <name> --save-dev

npm install <name> --save-dev
# 1. 安装模块到项目 node_modules 目录下。
# 2. 会将模块依赖写入 devDependencies 字段。
# 3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
# 4. 运行npm install --production 或者注明 NODE_ENV 变量值为 production 时,不会自动下载模块到 node_modules 目录中。

devDependencies 节点下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩 css、js 的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的,应该安装在 dependencies 节点下,所以我们应该使用 -save 的形式安装。

NVM

nvm 是一个独立于 node 的 shell 脚本,用于管理多版本 node,切换测试版本。(使用nvm指令,需要进行安装,本文不对 nvm 的安装进行介绍,nvm 官网:https://github.com/nvm-sh/nvm)

在开发中,有时候对 node 的版本有要求,有时候需要切换到指定的 node 版本来重现问题等。遇到这种需求的时候,我们可以使用 nvm 工具来管理多 node。

安装 node 版本

nvm ls-remote --lts 指令可以查看更多的 lts 版本的 node。

nvm install <version> 指令安装指定版本的 node。

1 # 查看更多的 node 版本
nvm ls-remote --lts
# 尝试更换一个lts版本的node。
# lts版本是会长期支持的版本,一般在生产环境使用的时候选择lts版本的node。
# 也可以去掉lts参数。

2 # 安装 指定版本 node
nvm install v4.8.7

切换 node 版本

通过 nvm ls 命令可以查看已经安装过的 node 版本。

nvm ls   # 查看已经安装的node版本

图片来源于:https://www.jianshu.com/p/ac6e4397c9f0

node 版介绍:

  • default:nvm 默认使用的版本。
  • node -> stable: 当前安装的 node 最新稳定版本。
  • iojs: iojs 的最新稳定版本。
  • lts/*: node lts 系列最新的稳定版本。
  • lts/argon,lts/boron,lts/carbon:分别指 lts 的三个大的版本的最新版本。

NPX

npx 是 npm v 5.2.0 引入的一条命令,安装 npm > 5.2.0 的版本,会自动被引入。(也可以手动安装)

npm install npx -g

npx 解决了哪些问题?

调用项目内部安装的模块

如果项目中的 webpack 是这样安装的:

npm install webpack --save-dev

命令行直接使用 webpack 程序会找不到这个指令,因为它是存在开发依赖中。所以需要这样调用:

# 项目的根目录下执行
node_modules/.bin/webpack

现在有了 npx 可以这样调用:

# 项目的根目录下
npx webpack

避免全局安装

当在执行 npx <command> 的时候,npx 会做什么事情?

npx 的原理是在运行时,会到 node_modules/.bin 路径和环境变量 $PATH 里面检查命令是否存在:

  • 如果存在,就直接使用本地的版本。
  • 如果不存在,直接下载最新的版本,命令完成后,不会在你的本级或者项目中留下任何东西。

由于 npx 会检查环境变量 $PATH,所以系统命令也可以调用。

YARN

yarn 是崭新的经过重新设计的 npm 客户端。

Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。

初始化一个新项目

yarn init 

添加依赖包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

将依赖项添加到不同依赖项类别中

分别添加到 devDependenciespeerDependenciesoptionalDependencies 类别中:

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

升级依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

移除依赖包

yarn remove [package]

安装项目的全部依赖

yarn or yarn install

注:公众号封面图片来源于:http://www.cnblogs.com/bee0060/p/5773560.html

原文发布于微信公众号 - 前端infoQ(webinfoq)

原文发表时间:2019-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券