npm start运行项目过程package.json字段详解
作者：小白啥时候能进阶成功
正文
在js项目运行时，通常输入npm start，即可运行，其运行过程如下：
npm start首先会安装一系列的必要程序，这些程序依赖package.json中的内容， package.json里默认定义了项目名称、项目版本号、项目介绍、项目作者、执行命令、生产环境要安装的包、开发环境要安装的包、引擎版本、浏览器的限制要求。
项目名称
"name": "webgpu-seed",
项目版本号
"version": "0.1.0",
项目介绍
"description": "🔺 A simple hello triangle example introducing WebGPU.",
"main": "dist/main.js",
执行命令
"scripts": {
"start": "npm i && npm run build && npm run dev",
"dev": "http-server",
"build": "cross-env NODE_ENV=production ts-node webpack.ts"
},
"init": "npm i", "start": "npm run dev && npm run server", "dev": "webpack --config build/webpack.dev.js --watch", "server": "http-server", "build": "webpack main.js main1.js", "prod":"webpack --config build/webpack.prod.js"
package.json文件中的字段script的每一个属性都是一个自定义的脚本命令，需要通过npm来执行。
npm run命令都是定义在package.json文件的scripts节点里面的。
npm run dev就是执行package.json中的scripts中的dev中的脚本；
npm run build就是执行package.json中的scripts中的build中的脚本；
npm run start 就是执行package.json中的scripts中的start中的脚本，也可简写 npm start；
（有4个可简写的命令npm start、npm stop、npm test、npm restart）
npm start实际上运行的是：npm i && npm run build && npm run dev
webpack --config 中--config (必须)用法
将现有的webpack.dev.js文件名修改为webpack.dev.config.js
1 包配置安装npm install（npm i）
（1）开发环境中的包只有在开发环境用
"devDependencies": {
"@types/node": "^16.6.x",
"@webgpu/types": "^0.1.6",
"clean-webpack-plugin": "^3.0.x",
"cross-env": "^7.0.x",
"http-server": "^13.0.x",
"ts-loader": "^9.2.x",
"ts-node": "^10.2.x",
"typescript": "^4.3.x",
"webpack": "^5.51.x"
},
比如我们在开发时用的是es6语言，开发环境有一个包，作用是在打包时把es6的语言转成es5的语言，那么打包后，在生产环境的代码是已经转成es5的代码，就不需要再转码了，所有也就不需要这个包了。
（2）生产环境的包在开发和生产都要使用
"dependencies": {
"gl-matrix": "^3.3.0"
}
如果是像echart（做图形的）的包，就是开发和生产环境都需要，所以要放在生产环境的包配置里。
如果已经知道想安装的包的版本，可以直接在package.json的 "dependencies" 或 "devDependencies"中配置好，直接运行npm install就行。npm install会检查package.json中有哪些包没被安装，进行安装，已安装的包不会再进行安装。
（3）npm i 是npm install的简写.
- 用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉
- npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
- 部分npm包在当前node版本下无法使用，必须使用建议版本
- 安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定
2 打包项目 npm run build
执行打包时， npm run build相当于执行package.json中的scripts中的build属性的脚本，就是执行cross-env NODE_ENV=production ts-node webpack.ts
（1）cross-env是跨平台设置和使用环境变量的脚本
cross-env NODE_ENV=production设置环境变量为生产环境
（2）ts-node webpack.ts
运行webpack.ts（tsconfig.json对项目做一些约束的）
3 运行项目 npm run dev
npm run dev 就是执行package.json 里的scripts的dev属性的脚本
http-server是开启一个本地服务
存储库
项目存储在git仓库
"repository": {
"type": "git",
"url": "git+https://github.com/alaingalvan/webgpu-seed.git"
},
关键词
项目中技术的关键词
"keywords": [
"webgpu",
"webgl",
"example",
"seed",
"types",
"typescript"
],
作者 "author": "Alain Galvan",
许可证 "license": "Unlicense",
bugs
问题讨论
"bugs": {
"url": "https://github.com/alaingalvan/webgpu-seed/issues"
},
homepage
"homepage": "https://github.com/alaingalvan/webgpu-seed#readme",
好了，介绍结束了，最重要的就是script节点中的内容，其他的节点类型介绍。
{
"name": "webgpu-seed",
"version": "0.1.0",
"description": "🔺 A simple hello triangle example introducing WebGPU.",
"main": "dist/main.js",
"scripts": {
"start": "npm i && npm run build && npm run dev",
"dev": "http-server",
"build": "cross-env NODE_ENV=production ts-node webpack.ts"
},
"repository": {
"type": "git",
"url": "git+https://github.com/alaingalvan/webgpu-seed.git"
},
"keywords": [
"webgpu",
"webgl",
"example",
"seed",
"types",
"typescript"
],
"author": "Alain Galvan",
"license": "Unlicense",
"bugs": {
"url": "https://github.com/alaingalvan/webgpu-seed/issues"
},
"homepage": "https://github.com/alaingalvan/webgpu-seed#readme",
"devDependencies": {
"@types/node": "^16.6.x",
"@webgpu/types": "^0.1.6",
"clean-webpack-plugin": "^3.0.x",
"cross-env": "^7.0.x",
"http-server": "^13.0.x",
"ts-loader": "^9.2.x",
"ts-node": "^10.2.x",
"typescript": "^4.3.x",
"webpack": "^5.51.x"
},
"dependencies": {
"gl-matrix": "^3.3.0"
}
}以上就是npm start运行项目过程package.json字段详解的详细内容，更多关于npm start运行package.json字段的资料请关注脚本之家其它相关文章！