JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > npm start运行package.json字段

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

作者:小白啥时候能进阶成功

这篇文章主要为大家介绍了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的简写.

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字段的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文