# 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来
Issue
欢迎在 Issue 中交流与讨论: Issue 9 (opens new window)
Author
新人入职新上手项目，如何把它跑起来，这是所有人都会碰到的问题：所有人都是从新手开始的。
有可能你会脱口而出：npm run dev/npm start，但实际工作中，处处藏坑，往往没这么简单。
- 查看是否有
CI/CD，如果有跟着CI/CD部署的脚本跑命令 - 查看是否有
dockerfile，如果有跟着dockerfile跑命令 - 查看 npm scripts 中是否有 dev/start，尝试
npm run dev/npm start - 查看是否有文档，如果有跟着文档走。为啥要把文档放到最后一个？原因你懂的
但即便是十分谨慎，也有可能遇到以下几个叫苦不迭、浪费了一下午时间的坑:
- 前端有可能在本地环境启动时需要依赖前端构建时所产生的文件，所以有时需要先正常部署一遍，再试着按照本地环境启动 (即需要先
npm run build一下，再npm run dev/npm start)。(比如，一次我们的项目 npm run dev 时需要 webpack DllPlugin 构建后的东西） - 别忘了设置环境变量或者配置文件
因此，设置一个少的 script，可以很好地避免后人踩坑，更重要的是，可以避免后人骂你
{
"scripts": {
"start": "npm run dev",
"config": "node assets && node config",
"build": "webpack",
// 设置一个 dev 的钩子，在 npm run dev 前执行，此处有可能不是必须的
"predev": "npm run build",
"dev": "webpack-dev-server --inline --progress"
}
}
# npm run dev 与 npm start 的区别
对于一个纯生成静态页面打包的前端项目而言，它们是没有多少区别的：生产环境的部署只依赖于构建生成的资源，更不依赖 npm scripts。可见 如何部署前端项目 (opens new window)。
使用 create-react-app 生成的项目，它的 npm script 中只有 npm start
{
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
使用 vuepress 生成的项目，它的 npm script 中只有 npm run dev
{
"dev": "vuepress dev",
"build": "vuepress build"
}
在一个面向服务端的项目中，如 next、nuxt 与 nest。dev 与 start 的区别趋于明显，一个为生产环境，一个为开发环境
- dev: 在开发环境启动项目，一般带有 watch 选项，监听文件变化而重启服务，此时会耗费大量的 CPU 性能，不宜放在生产环境
- start: 在生产环境启动项目
在 nest 项目中进行配置
{
"start": "nest start",
"dev": "nest start --watch"
}