前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • NPM工作流
    • 1 初识 npm script
      • 用 npm init 快速创建项目
      • 用 npm run 执行任意命令
      • 创建自定义 npm script
    • 2 运行多个 npm script 的各种姿势
      • 哪来那么多命令?
      • 让多个 npm script 串行?
      • 让多个 npm script 并行?
      • 有没有更好的管理方式?
    • 3 给 npm script 传递参数和添加注释
      • 给 npm script 传递参数
      • 给 npm script 添加注释
      • 调整 npm script 运行时日志输出
    • 4 使用 npm script 的钩子
      • 改造 test 命令
      • 增加覆盖率收集
    • 5 在 npm script 中使用变量
      • 使用预定义变量
      • 使用自定义变量
    • 6 实现命令行自动补全
      • 使用 npm run 直接列出
      • 把 npm completion 集成到 shell 中
      • 更高级的自动完成
      • 如何实现 yarn 的命令自动补全?
    • 7 实现 npm script 跨平台兼容
      • 文件系统操作的跨平台兼容
      • 用 cross-var 引用变量
      • 用 cross-env 设置环境变量
      • 再多说几句
    • 8 把庞大的 npm script 拆到单独文件中
      • 安装依赖
      • 准备目录和文件
      • 修改 scripty 脚本
      • 修改 package.json
      • 实际测试
      • 高级技巧
    • 9 用 node.js 脚本替代复杂的 npm script
      • 安装 shelljs 依赖
      • 创建 Node.js 脚本
      • 用 Node.js 实现同等功能
      • 让 package.json 指向新脚本
      • 测试 cover 命名
    • 10 实战1 文件变化时自动运行 npm script
      • 单元测试自动化
      • 代码检查自动化
    • 11 实战2 结合 live-reload 实现自动刷新
      • 安装项目依赖
      • 添加 npm script
      • 在页面中嵌入 livereload 脚本
      • 启动服务并测试
    • 12 实战3 在 git hooks 中运行 npm script
      • 安装项目依赖
      • 添加 npm script
      • 用 lint-staged 改进 pre-commit
    • 13 实战4 用 npm script 实现构建流水线
      • 项目目录结构
      • 添加构建过程
      • 准备脚本目录
      • 图片构建过程
      • 样式构建过程
      • JS 构建过程
      • 资源版本号和引用替换
      • 完整的构建步骤
    • 14 实战5 用 npm script 实现服务自动化运维
      • 使用 npm script 进行版本管理
      • 使用 npm script 进行服务进程和日志管理
  • Docker系统入门
  • Canvas入门
完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 1 初识 npm script

首先介绍创建 package.json 文件的科学方法,目标是掌握 npm init 命令。然后,通过在终端中运行自动生成的 test 命令,详细讲解 npm 脚本基本执行流程。 然后,动手给项目增加 eslint 命令,熟悉创建自定义命令的基本流程。

# 用 npm init 快速创建项目

开始探索 npm script 之前,我们先聊聊这些 scripts 所依赖的文件 package.json,以它为基础的 npm 则是 node.js 社区蓬勃发展的顶梁柱。

npm 为我们提供了快速创建 package.json 文件的命令 npm init,执行该命令会问几个基本问题,如包名称、版本号、作者信息、入口文件、仓库地址、许可协议等,多数问题已经提供了默认值,你可以在问题后敲回车接受默认值:

package name: (hello-npm-script)
version: (0.1.0)
description: hello npm script
entry point: (index.js)
test command:
git repository:
keywords: npm, script
license: (MIT)
@前端进阶之旅: 代码已经复制到剪贴板

上面的例子指定了描述(description)和关键字(keywords)两个字段,基本问题问完之后 npm 会把 package.json 文件内容打出来供你确认:

{
  "name": "hello-npm-script",
  "version": "0.1.0",
  "description": "hello npm script",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "script"
  ],
  "author": "wangshijun <wangshijun2010@gmail.com> (https://github.com/wangshijun)",
  "license": "MIT"
}

@前端进阶之旅: 代码已经复制到剪贴板

按回车确认就能把package.json 的内容写到文件系统,如果要修改 package.json,可以直接用编辑器编辑,或者再次运行 npm init,npm 默认不会覆盖修改里面已经存在的信息。

TIP#1: 嫌上面的初始化方式太啰嗦?你可以使用 npm init -f(意指 --force,或者使用 --yes)告诉 npm 直接跳过参数问答环节,快速生成 package.json。

初始化 package.json 时的字段默认值是可以自己配置的,细心的同学可能已经发现,我上面的默认版本号是 0.1.0,而 npm 默认的版本号是 0.0.1,可以用下面的命令去修改默认配置:

npm config set init.author.email "wangshijun2010@gmail.com"
npm config set init.author.name "wangshijun"
npm config set init.author.url "http://github.com/wangshijun"
npm config set init.license "MIT"
npm config set init.version "0.1.0"
@前端进阶之旅: 代码已经复制到剪贴板

TIP#2: 将默认配置和 -f 参数结合使用,能让你用最短的时间创建 package.json,快去自己试试吧。

严肃的工程师都会使用 Git 对源代码进行版本管理,在 npm init 的基础上,你可以使用 git init 来初始化 git 仓库,不再展开。

纸上得来终觉浅,想掌握 npm script,请打开终端,执行下列命令:

cd ~
mkdir hello-npm-script && cd $_
npm init
npm init -f
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • NPM工作流
    • 1 初识 npm script
      • 用 npm init 快速创建项目
      • 用 npm run 执行任意命令
      • 创建自定义 npm script
    • 2 运行多个 npm script 的各种姿势
      • 哪来那么多命令?
      • 让多个 npm script 串行?
      • 让多个 npm script 并行?
      • 有没有更好的管理方式?
    • 3 给 npm script 传递参数和添加注释
      • 给 npm script 传递参数
      • 给 npm script 添加注释
      • 调整 npm script 运行时日志输出
    • 4 使用 npm script 的钩子
      • 改造 test 命令
      • 增加覆盖率收集
    • 5 在 npm script 中使用变量
      • 使用预定义变量
      • 使用自定义变量
    • 6 实现命令行自动补全
      • 使用 npm run 直接列出
      • 把 npm completion 集成到 shell 中
      • 更高级的自动完成
      • 如何实现 yarn 的命令自动补全?
    • 7 实现 npm script 跨平台兼容
      • 文件系统操作的跨平台兼容
      • 用 cross-var 引用变量
      • 用 cross-env 设置环境变量
      • 再多说几句
    • 8 把庞大的 npm script 拆到单独文件中
      • 安装依赖
      • 准备目录和文件
      • 修改 scripty 脚本
      • 修改 package.json
      • 实际测试
      • 高级技巧
    • 9 用 node.js 脚本替代复杂的 npm script
      • 安装 shelljs 依赖
      • 创建 Node.js 脚本
      • 用 Node.js 实现同等功能
      • 让 package.json 指向新脚本
      • 测试 cover 命名
    • 10 实战1 文件变化时自动运行 npm script
      • 单元测试自动化
      • 代码检查自动化
    • 11 实战2 结合 live-reload 实现自动刷新
      • 安装项目依赖
      • 添加 npm script
      • 在页面中嵌入 livereload 脚本
      • 启动服务并测试
    • 12 实战3 在 git hooks 中运行 npm script
      • 安装项目依赖
      • 添加 npm script
      • 用 lint-staged 改进 pre-commit
    • 13 实战4 用 npm script 实现构建流水线
      • 项目目录结构
      • 添加构建过程
      • 准备脚本目录
      • 图片构建过程
      • 样式构建过程
      • JS 构建过程
      • 资源版本号和引用替换
      • 完整的构建步骤
    • 14 实战5 用 npm script 实现服务自动化运维
      • 使用 npm script 进行版本管理
      • 使用 npm script 进行服务进程和日志管理
  • Docker系统入门
  • Canvas入门