神奇的npm -- scripts

2,000 阅读2分钟

作为一个入门的前端开发,随时随地可以都可以来一波秀瞎小白的命令行操作: npm inpm run devnpm 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的这一功能给我们提供了一个极大的灵活性,比如,你可以在运行脚本之前检测一下环境,然后运行脚本,然后脚本运行之后,清理脚本运行过程中产生的中间文件。