神奇的npm -- scripts

作为一个入门的前端开发，随时随地可以都可以来一波秀瞎小白的命令行操作: npm i、npm run dev、npm run build ...

但是你真的知道这些命令怎么来的吗？怎么用的吗？

当然作为初级入门的前端实习生来说，前一个问题根本不算问题，直接在package.json中的scripts标签下添加一些命令就可以了，例如（bash环境下）：

{
    "scripts": {
        "hello": "echo hello world"
    }
}
复制代码

然后，在命令行中输入npm run hello，就会输出hello world。是不是跟当时学c语言的时候，老师让你们写的makefile很类似？这里也可以使用make来完成刚才的操作。

那么除了这种用法，还有其他用法吗？当然有了，先扔官方文档，有英文基础的可以直接看官网，不用看下面了。

npm的scripts中给了一下几个类似钩子的命令，允许你在安装发布时处理一些其他的操作：

prepublish: 当你要发布或者打包或者在本地安装的时候，出触发这个命令
prepare: 会在prepublish与prepublishOnly之间触发，以下几种情况会触发这个命令:
- 打包或者发布之前
- 安装git链接的dependencies
- 本地包的npm install，并且不带任何参数
prepublishOnly: 在prepare和prepack之间触发，只有运行npm publish，才会触发这个命令
prepack: 在打包之前运行，触发条件：
- npm pack
- npm publish
- 安装一个git链接的依赖
postpack: 打包完成之后触发
publish, postpublish: 发布成功之后触发
preinstall: 安装之前触发
install, postinstall: 安装之后触发
preuninstall, uninstall: 卸载之前触发
postuninstall: 卸载之后触发
...

还有很多，如start，不一一列举了，最重要的是npm为scripts中所有命令都提供了三个阶段钩子：开始运行之前、运行、运行结束。比如上面添加的hello命令，你可以改成下面的样子：

{
    "scripts": {
        "prehello": "echo 运行hello之前",
        "hello": "echo hello world",
        "posthello": "echo 运行hello之后"
    }
}
复制代码

这时候你再运行npm run hello，你会发现控制台一次输出上面三个信息。

npm的这一功能给我们提供了一个极大的灵活性，比如，你可以在运行脚本之前检测一下环境，然后运行脚本，然后脚本运行之后，清理脚本运行过程中产生的中间文件。