正文

在js項目運行時，通常輸入npm start，即可運行，其運行過程如下：

npm start首先會安裝一系列的必要程序，這些程序依賴package.json中的內(nèi)容， package.json里默認(rèn)定義了項目名稱、項目版本號、項目介紹、項目作者、執(zhí)行命令、生產(chǎn)環(huán)境要安裝的包、開發(fā)環(huán)境要安裝的包、引擎版本、瀏覽器的限制要求。

項目名稱

"name": "webgpu-seed",

項目版本號

"version": "0.1.0",

項目介紹

"description": "?? A simple hello triangle example introducing WebGPU.",

"main": "dist/main.js",

執(zhí)行命令

 "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來執(zhí)行。

npm run命令都是定義在package.json文件的scripts節(jié)點里面的。

npm run dev就是執(zhí)行package.json中的scripts中的dev中的腳本；

npm run build就是執(zhí)行package.json中的scripts中的build中的腳本；

npm run start 就是執(zhí)行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 (必須)用法

將現(xiàn)有的webpack.dev.js文件名修改為webpack.dev.config.js

1 包配置安裝npm install（npm i）

（1）開發(fā)環(huán)境中的包只有在開發(fā)環(huán)境用

"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"
},

比如我們在開發(fā)時用的是es6語言，開發(fā)環(huán)境有一個包，作用是在打包時把es6的語言轉(zhuǎn)成es5的語言，那么打包后，在生產(chǎn)環(huán)境的代碼是已經(jīng)轉(zhuǎn)成es5的代碼，就不需要再轉(zhuǎn)碼了，所有也就不需要這個包了。

（2）生產(chǎn)環(huán)境的包在開發(fā)和生產(chǎn)都要使用

"dependencies": {
        "gl-matrix": "^3.3.0"
    }

如果是像echart（做圖形的）的包，就是開發(fā)和生產(chǎn)環(huán)境都需要，所以要放在生產(chǎn)環(huán)境的包配置里。

如果已經(jīng)知道想安裝的包的版本，可以直接在package.json的 "dependencies" 或  "devDependencies"中配置好，直接運行npm install就行。npm install會檢查package.json中有哪些包沒被安裝，進行安裝，已安裝的包不會再進行安裝。

（3）npm i 是npm install的簡寫.

• 用npm i安裝的模塊無法用npm uninstall刪除，用npm uninstall i才卸載掉
• npm i會幫助檢測與當(dāng)前node版本最匹配的npm包版本號，并匹配出來相互依賴的npm包應(yīng)該提升的版本號
• 部分npm包在當(dāng)前node版本下無法使用，必須使用建議版本
• 安裝報錯時intall肯定會出現(xiàn)npm-debug.log 文件，npm i不一定

2 打包項目 npm run build

    執(zhí)行打包時， npm run build相當(dāng)于執(zhí)行package.json中的scripts中的build屬性的腳本，就是執(zhí)行cross-env NODE_ENV=production ts-node webpack.ts

（1）cross-env是跨平臺設(shè)置和使用環(huán)境變量的腳本

cross-env NODE_ENV=production設(shè)置環(huán)境變量為生產(chǎn)環(huán)境

（2）ts-node webpack.ts

運行webpack.ts（tsconfig.json對項目做一些約束的）

3 運行項目 npm run dev  

npm run dev 就是執(zhí)行package.json 里的scripts的dev屬性的腳本

http-server是開啟一個本地服務(wù)

存儲庫

項目存儲在git倉庫

"repository": {
        "type": "git",
        "url": "git+https://github.com/alaingalvan/webgpu-seed.git"
    },

關(guān)鍵詞

項目中技術(shù)的關(guān)鍵詞

"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",

好了，介紹結(jié)束了，最重要的就是script節(jié)點中的內(nèi)容，其他的節(jié)點類型介紹。

{
    "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字段詳解的詳細內(nèi)容，更多關(guān)于npm start運行package.json字段的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論