一天一夜，写完了这份高效组织NpmScript优秀实践

本文转载自微信公众号「全栈成长之路」，作者山月行。转载本文请联系全栈成长之路公众号。

成都创新互联公司是一家专注于网站建设、成都做网站与策划设计,沐川网站建设哪家好?成都创新互联公司做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:沐川等地区。沐川做网站价格咨询:18982081108

用了两天，终于把这篇文章赶完了。有兴趣的可以加我微信好友 shanyue94 进行交流。这篇文章也可以在山月的博客上找到，正文开始

众所周知，一个 Javasript 项目的脚本类工具，可以使用 package.json 中的 scripts 字段来组织，简单来说，这就是 npm script。

最典型最常用约定俗成的一个是 npm start，用以启动项目：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "scripts": { 
    3. 
  
  
  
  
  3.     "start": "next" 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5. } 
    6.

约定速成的还有很多，如下所列

  • npm install
  • npm test
  • npm publish
  • ...

约定速成的亲儿子脚本自然和其它第三方脚本不一样，如果需要执行它，直接使用 npm 前缀即可，如 npm start，那其它脚本呢?那就需要 npm run 前缀了。而 yarn 就没这么多讲究了，一视同仁。

 
 
 
 
    
  
  
  
  
  1. $ npm run  
    2. 
  
  
  
  
  2. $ npm run-script dev 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. # 为了简单方便，等同于 
    5. 
  
  
  
  
  5. $ npm run dev 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. # yarn 
    8. 
  
  
  
  
  8. $ yarn dev 
    9.

以上是众所周知的，以下讲一讲有可能不是众所周知的

运行: npm run dev 与 npm start 的区别

对于一个「纯生成静态页面打包」的前端项目而言，它们是没有多少区别的：生产环境的部署只依赖于构建生成的资源，更不依赖 npm scripts。可见 如何部署前端项目[1]。

使用 create-react-app 生成的项目，它的 npm script 中只有 npm start

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "start": "react-scripts start", 
    3. 
  
  
  
  
  3.   "build": "react-scripts build", 
    4. 
  
  
  
  
  4.   "test": "react-scripts test", 
    5. 
  
  
  
  
  5.   "eject": "react-scripts eject" 
    6. 
  
  
  
  
  6. } 
    7.

使用 vuepress 生成的项目，它的 npm script 中只有 npm run dev

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "dev": "vuepress dev", 
    3. 
  
  
  
  
  3.   "build": "vuepress build" 
    4. 
  
  
  
  
  4. } 
    5.

在一个「面向服务端」的项目中，如 next、nuxt 与 nest。dev 与 start 的区别趋于明显，一个为生产环境，一个为开发环境

dev: 在开发环境启动项目，一般带有 watch 选项，监听文件变化而重启服务，此时会耗费大量的 CPU 性能，不宜放在生产环境

start: 在生产环境启动项目

在 nest 项目中进行配置

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "start": "nest start", 
    3. 
  
  
  
  
  3.   "dev": "nest start --watch" 
    4. 
  
  
  
  
  4. } 
    5.

运行：Script Hooks -> 如何把新项目快速跑起来

新人入职新上手项目，如何把它跑起来，这是所有人都会碰到的问题：所有人都是从新手开始的。

有可能你会脱口而出：npm run dev/npm start，但实际工作中，处处藏坑，往往没这么简单。

  1. 查看是否有 CI/CD，如果有跟着 CI/CD 部署的脚本跑命令
  2. 查看是否有 dockerfile，如果有跟着 dockerfile 跑命令
  3. 查看 npm scripts 中是否有 dev/start，尝试 npm run dev/npm start
  4. 查看是否有文档，如果有跟着文档走。为啥要把文档放到最后一个?原因你懂的

但即便是十分谨慎，也有可能遇到以下几个叫苦不迭、浪费了一下午时间的坑:

  1. 前端有可能在「本地环境启动时需要依赖前端构建时所产生的文件」，所以有时需要「先正常部署一遍，再试着按照本地环境启动 (即需要先 npm run build 一下，再 npm run dev/npm start)」。(比如，一次我们的项目 npm run dev 时需要 webpack DllPlugin 构建后的东西)
  2. 别忘了设置环境变量或者配置文件

因此，设置一个少的 script，可以很好地避免后人踩坑，更重要的是，可以避免后人骂你

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "scripts": { 
    3. 
  
  
  
  
  3.     "start": "npm run dev", 
    4. 
  
  
  
  
  4.     "config": "node assets && node config", 
    5. 
  
  
  
  
  5.     "build": "webpack", 
    6. 
  
  
  
  
  6.     // 设置一个 dev 的钩子，在 npm run dev 前执行，此处有可能不是必须的 
    7. 
  
  
  
  
  7.     "predev": "npm run build", 
    8. 
  
  
  
  
  8.     "dev": "webpack-dev-server --inline --progress" 
    9. 
  
  
  
  
  9.   } 
    10. 
  
  
  
  
  10. } 
    11.

Hooks

在 npm script 中，对于每一个命令都有 Pre/Post 钩子，分别在命令执行前后执行

 
 
 
 
    
  
  
  
  
  1. npm run