10分鐘內講解Npm指令碼使用教學

2022-10-26 14:02:38

引言

使用Node進行開發時，必須使用npm，指令碼是npm的最強大和最常見的功能之一。

我將在本文中介紹如何使用npm指令碼。

1.什麼是npm指令碼？

Npm允許您使用檔案中的scripts欄位定義指令碼命令package.json。

    {
        // ...
        "scripts": {
            "build": "node build.js"
        }
    }

上面的程式碼是package.json檔案的一部分，scripts這裡的欄位是一個物件。它的每個屬性都對應一個指令碼。例如，與該build命令對應的指令碼為node build.js。

如果您npm run在命令列下使用該命令，指令碼將被執行。

    $ npm run build
    # equivalent to execution
    $ node build.js

在中定義的這些指令碼package.json稱為npm指令碼。有很多優點：

與專案相關的指令碼可以放在一個地方。
用於不同專案的指令碼命令可以使用相同的外部介面，只要它們具有相同的功能即可。使用者不需要知道如何測試您的專案，只需執行npm run test即可。
您可以利用npm提供的許多輔助功能。

您可以使用npm run不帶任何引數的命令來檢視當前專案的所有npm指令碼命令。

    $ npm run

2.原則

npm指令碼的原理非常簡單。無論何時npm run執行，都會自動建立一個新的shell，並且將在該shell中執行指定的指令碼命令。因此，只要該命令可以由外殼程式（通常是Bash）執行，它就可以用npm指令碼編寫。

特殊的是，由建立的shell npm run將node_modules/.bin當前目錄的子目錄新增到PATH變數中，並且該PATH變數將在執行後恢復。

這意味著可以直接通過指令碼名稱來呼叫當前目錄的node_modules / .bin子目錄中的所有指令碼，而無需新增路徑。例如，如果當前專案的依賴項中包含Mocha，則只需mocha test直接編寫：

    "test": "mocha test"

而不是像這樣寫：

    "test": "./node_modules/.bin/mocha test"

由於對npm指令碼的唯一要求是指令碼可以在shell中執行，因此它們不一定是Node指令碼，並且可以在其中編寫任何可執行檔案。

npm指令碼的退出程式碼也遵循shell指令碼的規則。如果退出程式碼不是0，則npm將假定指令碼執行失敗。

3.萬用字元

由於npm指令碼是Shell指令碼，因此可以使用Shell萬用字元。

    "lint": "jshint *.js"
    "lint": "jshint **/*.js"

在上面的程式碼中，*表示任何檔名，**表示任何子目錄。

如果要將萬用字元傳遞給原始命令以防止被Shell逸出，則必須逸出星號。

    "test": "tap test/*.js"

4.傳遞引數

使用--指示傳遞給npm指令碼的引數。

    "lint": "jshint **.js"

如果將引數傳遞給上述npm run lint命令，則必須編寫如下。

    $ npm run lint --  --reporter checkstyle > checkstyle.xml

您也可以在中再次封裝命令package.json。

    "lint": "jshint **.js",
    "lint:checkstyle": "npm run lint -- --reporter checkstyle &gt; checkstyle.xml"

5.執行順序

如果要在npm指令碼中執行多個任務，則需要弄清執行順序。

如果是並行執行（並行並行執行），則可以使用＆符號。

    $ npm run script1.js & npm run script2.js

如果是順序執行（僅在成功執行前一個任務時才執行下一個任務），則可以使用該&&符號。

    $ npm run script1.js && npm run script2.js

這兩個符號是Bash的功能。另外，您可以使用節點的任務管理模組：script-runner，npm-run-all，redrun。

6.預設值

通常，npm指令碼由使用者提供。但是，npm為兩個指令碼提供了預設值。換句話說，這兩個指令碼無需定義即可直接使用。

    "start": "node server.js"，
    "install": "node-gyp rebuild"

在上述程式碼中，預設值npm run start是node server.js，提供有一個server.js在專案的根目錄指令碼; 預設值npm run install就是node-gyp rebuild，只要有一個binding.gyp專案的根目錄下的檔案。

7.勾點

npm指令碼有兩個勾點：pre和post。例如，build指令碼命令的掛鉤是prebuild和postbuild。

    "prebuild": "echo I run before the build script",
    "build": "cross-env NODE_ENV=production webpack",
    "postbuild": "echo I run after the build script

當用戶執行時，它將按以下順序自動執行npm run build。

    npm run prebuild &amp;&amp; npm run build &amp;&amp; npm run postbuild

因此，可以在這兩個掛鉤中進行一些準備和清理。這是下面的例子。

    "clean": "rimraf ./dist && mkdir dist",
    "prebuild": "npm run clean",
    "build": "cross-env NODE_ENV=production webpack"

Npm預設提供以下勾點:

預釋出，後釋出
預安裝，後安裝
preuninstall，postuninstall
前版本，後版本
前測，後測
穿越，後停
啟動前，記錄開始
重啟前，重啟後

自定義指令碼命令也可以與pre和post掛鉤一起新增。例如，指令碼命令myscript具有premyscript和postmyscript勾點。但是，double pres和posts無效。例如，prepretest和postposttest是無效的。

在npm_lifecycle_event由npm提供的變數返回當前執行的指令碼的名稱，如pretest，test，posttest，等。因此，您可以使用該變數為npm scripts同一指令碼檔案中的不同命令編寫程式碼。讓我們看下面的例子。

    const TARGET = process.env.npm_lifecycle_event;
    if (TARGET === 'test') {
          console.log('Running the test task!');
    }
    if (TARGET === 'pretest') {
        console.log('Running the pretest task!');
    }
    if (TARGET === 'posttest') {
         console.log('Running the posttest task!');
    }

❝ 請注意，prepublish掛鉤不僅將在npm publish命令之前執行，而且還將在npm install（不帶任何引數）命令之前執行。但是，這種行為很容易使使用者感到困惑，因此npm 4引入了一個prepare行為類似於的新勾點prepublish。從npm 5開始，該prepublish勾點只會在npm publish命令之前執行。 ❞

8.縮寫形式

這是四個常用npm指令碼的簡短版本。

npm start 是短的 npm run start

npm stop 是短的 npm run stop

npm test 是短的 npm run test

npm restart 是短的 npm run stop && npm run restart && npm run start

npm start，npm stop和npm restart都是很好的理解，而npm restart是實際執行三個指令碼命令的化合物命令：stop，restart，start。並且執行順序如下。

重新啟動
調動
停
郵件停止
重新開始
預啟動
開始
郵件開始
重啟後

9.變數

npm指令碼具有非常強大的功能，可讓您使用npm的內部變數。

首先，npm指令碼可以獲取package.json帶有npm_package_字首的欄位。例如，package.json下面是一個。

    {
        "name": "foo", 
        "version": "1.2.5",
        "scripts": {
            "view": "node view.js"
        }
    }

然後，該變數npm_package_name返回foo，並且該變數npm_package_version返回1.2.5。

    // view.js
    console.log(process.env.npm_package_name); // foo
    console.log(process.env.npm_package_version); // 1.2.5

在上面的程式碼中，我們package.json通過環境變數process.env物件獲取的欄位值。如果是Bash指令碼，則可以使用$npm_package_name和獲得兩個值$npm_package_version。

該 npm_package_字首也支援巢狀的package.json領域。

    "repository": {
        "type": "git",
        "url": "xxx"
    },
    scripts: {
        "view": "echo $npm_package_repository_type"
    }

在上面的程式碼中，您可以使用獲取欄位的type屬性。repositorynpm_package_repository_type

這是另一個例子。

    "scripts": {
        "install": "foo.js"
    }

在上面的程式碼中，npm_package_scripts_install變數的值等於foo.js。

npm config get xxx也可以通過npm_config_字首獲取npm的設定變數（命令返回的值）。例如，您可以使用獲取當前模組的release標籤npm_config_tag。

    "view": "echo $npm_config_tag",

請注意，環境變數可以覆蓋中的config物件package.json。

    { 
    "name" : "foo",
    "config" : { "port" : "8080" },
    "scripts" : { "start" : "node server.js" }
    }

在上面的程式碼中，npm_package_config_port變數返回8080。並且可以通過以下方法覆蓋此值。

    $ npm config set foo:port 80

env命令可以列出所有環境變數。

    "env": "env"

10.常見指令碼範例

    // delete the directory
    "clean": "rimraf dist/*",
    // build an HTTP service locally
    "serve": "http-server -p 9090 dist/",
    // open the browser
    "open:dev": "opener http://localhost:9090",
    // real-time refresh
    "livereload": "live-reload --port 9091 dist/",
    // build an HTML file
    "build:html": "jade index.jade > dist/index.html",
    // Re-execute the build as long as the CSS file has changed.
    "watch:css": "watch 'npm run build:css' assets/styles/",
    // Re-execute the build as long as the HTML file has changed
    "watch:html": "watch 'npm run build:html' assets/html",
    // Deploy to Amazon S3.
    "deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",
    // build favicon
    "build:favicon": "node scripts/favicon.js",

11.使用nrm管理npm映象

nrm(npm registry manager)是npm的映象源管理工具，有時候國外資源太慢，使用這個就可以快速地在 npm 源間切換。

在命令列執行以下命令，全域性安裝nrm。

    npm install -g nrm

執行命令nrm ls檢視可選的源。

其中，帶*的是當前使用的源，上面的輸出表明當前源是taobao源。

如果要切換到cnpm源或者其他映象，您可以使用nrm use 源名稱進行切換：

    nrm use cnpm

你可以增加客製化的源，特別適用於新增企業內部的私有源，執行命令nrm add <registry> <url>，其中reigstry為源名，url為源的路徑。

    nrm add registry http://registry.npm.frp.trmap.cn/

刪除，執行以下命令：

    nrm del <registry> url

你還可以通過 nrm test 測試相應源的響應時間,從而決定使用哪種映象！

    nrm test taobao

以上就是10分鐘內講解Npm指令碼使用教學的詳細內容，更多關於Npm指令碼教學的資料請關注it145.com其它相關文章！