npm start运行项目过程package.json字段详解

目录

• 正文
• 项目名称
• 项目版本号
• 项目介绍
• 执行命令
• 1 包配置安装npm install（npm i）
• 2 打包项目 npm run build
• 3 运行项目 npm run dev
• 存储库
• 关键词
• bugs
• homepage

正文

在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字段的资料请关注我们其它相关文章！