不夸张的说,这可能是目前社区中最完整的把 npm script 和前端工作流相结合并运用到实际项目中的文字 + 视频版教程了,内容源于我对最佳实践的积累和实战,也是我精心编写和录制 1 个月的成果
。
互联网大潮和前端社区的蓬勃发展让现代前端项目的复杂性比 5 年前翻了好多倍,前端工作流中也出现了越来越多工程化的环节,比如代码风格检查、自动化测试、自动化构建、自动化部署、服务监控、依赖管理等。
我们面临什么问题?
大多数前端工程师的工作流可能都离不开 gulp、grunt、webpack 这样的重量级
构建工具
,而是否能熟练运用这些工具将重复任务自动化也是工程师素质的重要体现,我本人也是这些自动化工具的忠实粉丝,因为它们确实能帮我解决问题。但几番折腾之后,你可能已经像我一样感受到明显的痛点:比如对插件依赖严重(开发者的自由度受限),插件和底层工具文档脱节,调试变的更复杂等,在这点上,我们并不孤独,社区已经有人对上面的问题作出总结并写了文章:Why I left gulp and grunt for npm scripts。
就我自己的亲身经历,我曾接手维护过使用了 39 个 gulp 插件的项目,因为项目起步较早,部分插件所依赖的基础工具版本都比较老,当这些插件所依赖的基础工具升级之后,gulp 插件本身并没有更新的那么快,我不得不 fork 原仓库去维护内部的版本,而当 gulp 发布了新版本之后,升级插件更是一场艰苦的持久战。
冷静思考下来,上面这种复杂性其实并没有必要,在软件工程里面有个重要的原则,就是简单性,越是简单的东西越是可靠,从概率论的角度,任何系统环节越多稳定性越差。
我们该怎么解决问题?
相比而言,直接使用 npm 内置的 script 机制已经被无数开发者证明是更好的选择,它能减轻甚至消除上面的痛点:你可以直接使用海量的 npm 包来完成你的任务、不需要在插件文档和基础工具文档间来回切换,最重要的点,不使用 grunt 之类的构建工具能让你的技术栈相对更简单,而我在做技术选择是遵循的基本原则是简单化,简单才有可能容易让别人上手。
使用 npm script 各种基础工具你都可以信手拈来,只要你会使用 npmjs.com 去搜索,或者去 libraries.io 上搜索。
可能有同学会反问,
Talk is cheap, show me the data
,下面这张图是最好的证明:
更精确的数据是:截止 2017年11月,grunt 插件 6309 个,gulp 插件 3367 个,webpack 插件数量 2174 个,而 npm 包多达 594438 个,并且还在飞速增长
。
那 npm script 为什么没有没有在构建工具中成为主流呢?可能大多数人觉得使用 npm script 需要很强的命令行功底、或者它不够强大、或者它不能跨平台。可以很负责任的说,社区发展到现在,上面的担心都是多余的。
如何更快更好的解决问题?
这也是掘金小册《使用 npm script 打造超溜前端工作流》的切入点,我在这本小册中会用
step-by-step
的方式讲解现代前端工作流中的 npm script 用法。即使你是命令行小白,也能轻松跟上,小册会以实际前端项目为底板逐步介绍更高阶的话题。学完这本小册,你将熟知使用 npm script 打造前端工作流要用的各种小工具和技巧。
小册的内容划分为 4 篇:
-
入门篇:创建和运行 npm script,熟悉和理解基本套路,分 3 小节;
-
进阶篇:原来 npm script 还可以这样用?分 3 小节,介绍生命周期机制、内置和自定义变量的声明和使用、命令行自动补全等话题;
-
2.1 使用 npm script 生命周期钩子
-
2.2 在 npm script 中使用环境变量
-
2.3 实现 npm script 命令自动补全
-
高阶篇:如何管理复杂的 npm script?分 3 小节,介绍;