• 实战篇 02：结合 live-reload 实现自动刷新
  结合 live-reload 实现自动刷新 前端工程师日常开发最频繁（实际上最浪费时间）的操作是什么？可能你已经想到了，就是刷新页面，要让变更生效，需要重新加载，刷新页面的操作就变成了重复低效的操作。 于是社区里出现了 LiveReload 来把这个过程自动化，react 种子项目生成工具 create-react-app 中就使用了这种技术。 但随着技术的演化，在单页应用中刷新页面意...
  2021-10-12 13:01:55 | FrontEnd
• 实战篇 01：监听文件变化并自动运行 npm script
  实战篇 01：监听文件变化并自动运行 npm script 软件工程师做的事情基本都是在实现自动化，比如各种业务系统是为了业务运转的自动化，部署系统是为了运维的自动化，对于开发者本身，自动化也是提升效率的关键环节，在实际开发过程中也有不少事情是可以自动化的。 拥抱现代前端工作流的同学都会有代码风格检查、单元测试等环节，这样就很需要在代码变更之后立即得到反馈，如代码改动导致了那个 Case...
  2021-10-12 13:01:55 | FrontEnd
• 高阶篇 03：用 node.js 脚本替代复杂的 npm script
  用 node.js 脚本替代复杂的 npm script Node.js 丰富的生态能赋予我们更强的能力，对于前端工程师来说，使用 Node.js 来编写复杂的 npm script 具有明显的 2 个优势： 首先，编写简单的工具脚本对前端工程师来说额外的学习成本很低甚至可以忽略不计， 其次，因为 Node.js 本身是跨平台的，用它编写的脚本出现跨平台兼容问题的概率很小。 下面我们...
  2021-10-12 13:01:55 | FrontEnd
• 高阶篇 02：把庞大的 npm script 拆到单独文件中
  高阶篇 02：把庞大的 npm script 拆到单独文件中 当 npm script 不断累积、膨胀的时候，全部放在 package.json 里面可能并不是个好主意，因为这样会导致 package.json 糟乱，可读性降低。 借助 scripty 我们可以将 npm script 剥离到单独的文件中，从而把复杂性隔到单独的模块里面，让代码整体看起来更加清晰。 示例项目中的覆盖率相...
  2021-10-12 13:01:55 | FrontEnd
• 高阶篇 01：实现 npm script 跨平台兼容
  高阶篇 01：实现 npm script 跨平台兼容 到目前为止，如果你在 Linux、Mac 平台做开发，所有的 npm script 都会顺利运行，但是 Windows 下面的同学可能就比较痛苦了，因为不是所有的 shell 命令都是跨平台兼容的，甚至各种常见的文件系统操作也是不兼容的。 可能有部分同学处理过 npm script 跨平台兼容的问题，比如粗暴的为两种平台各写一份 np...
  2021-10-12 13:01:55 | FrontEnd
• 进阶篇 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