-
实战篇 05:用 npm script 实现服务自动化运维
用 npm script 实现服务自动化运维
需要事先说明的是,本节部分内容涉及到非前端的话题,比如服务的部署、日志,但会从前端项目管理开始,比如依赖管理、版本管理等。
即使对自己定位是纯粹前端开发的同学,也建议阅读下,因为技不压身,了解整个前端项目交付流程中需要考量的点能让我们更有大局观。
通常来说,项目构建完成之后,就成为待发布的版本,因此版本管理需要考虑,甚至做成自动化的,然后,...
2021-10-12 13:01:55 |
FrontEnd
-
实战篇 04:用 npm script 实现构建流水线
实战篇 04:用 npm script 实现构建流水线
在现代前端项目的交付工作流中,部署前最关键的环节就是构建,构建环节要完成的事情通常包括:
源代码预编译:比如 less、sass、typescript;
图片优化、雪碧图生成;
JS、CSS 合并、压缩;
静态资源加版本号和引用替换;
静...
2021-10-12 13:01:55 |
FrontEnd
-
实战篇 03:在 git hooks 中运行 npm script
实战篇 03:在 git hooks 中运行 npm script
严肃的研发团队都会使用 Git 之类的版本管理系统来管理代码,随着 GitHub 的广受欢迎,相信大家对 Git 并不陌生。Git 在代码版本管理之外,也提供了类似 npm script 里 pre、post 的钩子机制,叫做 Git Hooks,钩子机制能让我们在代码 commit、push 之前(后)做自己想做的事情。...
2021-10-12 13:01:55 |
FrontEnd
-
实战篇 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