• 进阶篇 03：实现 npm script 命令自动补全
  实现 npm script 命令自动补全 当 npm script 里面积累的命令越来越多时，重度命令行用户肯定会好奇，能不能实现类似 bash、zsh 里面的命令自动补全？ 答案是肯定的，下面来逐一介绍。 使用 npm run 直接列出 前面章节有过介绍，不带任何参数运行 npm run 能列出 scripts 对象中定义的所有命令，再结合管道操作符、less 命令（这里的 les...
  2021-10-12 13:01:55 | FrontEnd
• 进阶篇 02：在 npm script 中使用环境变量
  进阶篇 02：在 npm script 中使用环境变量 npm 为加高效的执行 npm script 做了大量的优化，创建并运行 npm script 命令 里面讲到的环境变量特性能让我们在 npm script 中直接调用依赖包里的可执行文件，更强大的是，npm 还提供了 $PATH 之外的更多的变量，比如当前正在执行的命令、包的名称和版本号、日志输出的级别等。 DRY（Don’t R...
  2021-10-12 13:01:55 | FrontEnd
• 进阶篇 01：使用 npm script 的钩子
  进阶篇 01：使用 npm script 的钩子 为了方便开发者自定义，npm script 的设计者为命令的执行增加了类似生命周期的机制，具体来说就是 pre 和 post 钩子脚本。 这种特性在某些操作前需要做检查、某些操作后需要做清理的情况下非常有用。 举例来说，运行 npm run test 的时候，分 3 个阶段： 检查 scripts 对象中是否存在 pr...
  2021-10-12 13:01:55 | FrontEnd
• 入门篇 03：给 npm script 传递参数和添加注释
  本小节会介绍 3 个知识点：给 npm script 传递参数以减少重复的 npm script；增加注释提高 npm script 脚本的可读性；控制运行时日志输出能让你专注在重要信息上。 给 npm script 传递参数 eslint 内置了代码风格自动修复模式，只需给它传入 –fix 参数即可，在 scripts 中声明检查代码命令的同时你可能也需要声明修复代码的命令，面对这种需...
  2021-10-12 13:01:55 | FrontEnd
• 入门篇 02：运行多个 npm script 的各种姿势
  运行多个 npm script 的各种姿势 前端项目通常会包括多个 npm script，对多个命令进行编排是很自然的需求，有时候需要将多个命令串行，即脚本遵循严格的执行顺序； 有时候则需要让它们并行来提高速度，比如不相互阻塞的 npm script。 社区中也有比 npm 内置的多命令运行机制更好用的解决方案：npm-run-all。 哪来那么多命令？ 通常来说，前端项目会包含 ...
  2021-10-12 13:01:55 | FrontEnd
• 入门篇 01：创建并运行 npm script 命令
  入门篇 01：创建并运行 npm script 命令 首先介绍创建 package.json 文件的科学方法，目标是掌握 npm init 命令。 然后，通过在终端中运行自动生成的 test 命令，详细讲解 npm 脚本基本执行流程。 然后，动手给项目增加 eslint 命令，熟悉创建自定义命令的基本流程。 用 npm init 快速创建项目 开始探索 npm script 之前，...
  2021-10-12 13:01:55 | FrontEnd
• 为什么选择 npm script
  为什么选择 npm script 可能在你翻开这个页面的同时，心里在嘀咕，为什么要选择 npm script？ 我用着 grunt、gulp 不是挺好的么？ 如果你在心里这么问自己，我会很欣慰，因为理性的选择都应该从为什么开始。 在小册介绍中我提到的重量级构建工具所带来的问题，已有前人总结的非常不错，吐血推荐大家阅读原文：Why I left gulp and grunt for n...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-14-性能监测篇：Performance、LightHouse 与性能 API
  可视化监测 性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。 平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。 这两种方案下都有非常优秀、且触手可及的相关工具供大家选择，本节我们就一起来研究一下这些工具的用法。 可视化监测：从 Performance 面板说起 Performance 是 Chrome 提供给我们的...
  2021-10-12 13:01:55 | FrontEnd