Comments (4)
新人入职新上手项目,如何把它跑起来,这是所有人都会碰到的问题:所有人都是从新手开始的。
有可能你会脱口而出: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 构建后的东西) - 别忘了设置环境变量或者配置文件 (.env/consul/k8s-configmap)
因此,设置一个少的 script,可以很好地避免后人踩坑,更重要的是,可以避免后人骂你,
此时可设置 script hooks,如 prepare
、postinstall
自动执行脚本,来完善该项目的基础设施
{
"scripts": {
"start": "npm run dev",
"config": "node assets && node config",
"build": "webpack",
// 设置一个钩子,在 npm install 后自动执行,此处有可能不是必须的
"prepare": "npm run build",
"dev": "webpack-dev-server --inline --progress"
}
}
npm run dev 与 npm start 的区别
对于一个纯生成静态页面打包的前端项目而言,它们是没有多少区别的:生产环境的部署只依赖于构建生成的资源,更不依赖 npm scripts。可见 如何部署前端项目。
使用 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"
}
from daily-question.
我的意见和楼上相反,应该先大概看一遍文档…… 文档中会描述本地环境的配置方法
查看是否有 CI/CD,如果有跟着 CI/CD 部署的脚本跑命令
查看是否有 dockerfile,如果有跟着 dockerfile 跑命令
查看 npm scripts 中是否有 dev/start,尝试 npm run dev/npm start
大部分公司的开发环境都是本地环境,所以什么 CI/CD、Docker 可以先放到一边
npm run dev/npm start 这个是一般的约定,但不是所有的项目都是这样。所以需要先看 package.json 中的 script 来确定
npm run dev 和 npm start 的区别?
- npm start 是 npm run start 的别名,支持 prestart 和 poststart 钩子
from daily-question.
我的意见和楼上相反,应该先大概看一遍文档…… 文档中会描述本地环境的配置方法
查看是否有 CI/CD,如果有跟着 CI/CD 部署的脚本跑命令 查看是否有 dockerfile,如果有跟着 dockerfile 跑命令 查看 npm scripts 中是否有 dev/start,尝试 npm run dev/npm start
大部分公司的开发环境都是本地环境,所以什么 CI/CD、Docker 可以先放到一边
npm run dev/npm start 这个是一般的约定,但不是所有的项目都是这样。所以需要先看 package.json 中的 script 来确定
npm run dev 和 npm start 的区别?
- npm start 是 npm run start 的别名,支持 prestart 和 poststart 钩子
你是真没吃过文档的亏。。。管他什么公司,文档都有坑。
from daily-question.
先看readme啊,node版本之类的都不知道,待会node-sass之类的东西都装不上岂不是搞笑了
from daily-question.
Related Issues (20)
- 多阶段构建并不需要 docker-compose HOT 1
- 【Q742】大文件上传,如何获取到读取进度? HOT 1
- 代码
- [feature request]面试题添加难度排序以及一键生成一份面试题的工具 HOT 2
- 【Q747】如何实现一个 omit/omitBy 函数 HOT 6
- 【Q748】在 babel 编译为低版本 ES 时,为何能够编译可选链之类语法,但无法编译 API HOT 1
- 【Q743】实现 batchFn 函数,可以批量执行函数 HOT 4
- 【开源自荐】推荐一个每日更新的前端面试题库 HOT 1
- 【Q474】在 react 中,以下父子组件的 useEffect/useLayoutEffect 顺序如何 HOT 1
- 【Q745】webpack 的打包流程是什么样的 HOT 1
- 【Q744】数据库中更新一条记录时,如何自动更新其 updated_at 字段
- 【Q746】如何避免 SQL 攻击
- 【Q749】React18 有哪些新特性
- 【Q750】React19 有哪些新特性
- 【Q752】实现 useDebouncedCallback
- 【Q753】你是如何学习前端的
- 【Q754】实现 LazyMan HOT 1
- 【Q755】简述 WebWorker API
- 【Q756】Promise.race 与 Promise.any
- 【Q757】如何解决深拷贝问题中的循环引用 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from daily-question.