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"
 }
}
作者:小白啥时候能进阶成功原文地址:https://blog.csdn.net/qq_34754747/article/details/121228998

%s 个评论

要回复文章请先登录注册