神奇的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来完成刚才的操做。

那么除了这种用法，还有其余用法吗？固然有了，先扔官方文档docs.npmjs.com/misc/script…，有英文基础的能够直接看官网，不用看下面了。

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的这一功能给咱们提供了一个极大的灵活性，好比，你能够在运行脚本以前检测一下环境，而后运行脚本，而后脚本运行以后，清理脚本运行过程当中产生的中间文件。