引言

使用Node進(jìn)行開發(fā)時(shí)，必須使用npm，腳本是npm的最強(qiáng)大和最常見的功能之一。

我將在本文中介紹如何使用npm腳本。

1.什么是npm腳本？

Npm允許您使用文件中的scripts字段定義腳本命令package.json。

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

上面的代碼是package.json文件的一部分，scripts這里的字段是一個(gè)對(duì)象。它的每個(gè)屬性都對(duì)應(yīng)一個(gè)腳本。例如，與該build命令對(duì)應(yīng)的腳本為node build.js。

如果您npm run在命令行下使用該命令，腳本將被執(zhí)行。

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

在中定義的這些腳本package.json稱為npm腳本。有很多優(yōu)點(diǎn)：

• 與項(xiàng)目相關(guān)的腳本可以放在一個(gè)地方。
• 用于不同項(xiàng)目的腳本命令可以使用相同的外部接口，只要它們具有相同的功能即可。用戶不需要知道如何測(cè)試您的項(xiàng)目，只需運(yùn)行npm run test即可。
• 您可以利用npm提供的許多輔助功能。

您可以使用npm run不帶任何參數(shù)的命令來查看當(dāng)前項(xiàng)目的所有npm腳本命令。

    $ npm run

2.原則

npm腳本的原理非常簡(jiǎn)單。無論何時(shí)npm run執(zhí)行，都會(huì)自動(dòng)創(chuàng)建一個(gè)新的shell，并且將在該shell中執(zhí)行指定的腳本命令。因此，只要該命令可以由外殼程序（通常是Bash）運(yùn)行，它就可以用npm腳本編寫。

特殊的是，由創(chuàng)建的shell npm run將node_modules/.bin當(dāng)前目錄的子目錄添加到PATH變量中，并且該PATH變量將在執(zhí)行后恢復(fù)。

這意味著可以直接通過腳本名稱來調(diào)用當(dāng)前目錄的node_modules / .bin子目錄中的所有腳本，而無需添加路徑。例如，如果當(dāng)前項(xiàng)目的依賴項(xiàng)中包含Mocha，則只需mocha test直接編寫：

    "test": "mocha test"

而不是像這樣寫：

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

由于對(duì)npm腳本的唯一要求是腳本可以在shell中執(zhí)行，因此它們不一定是Node腳本，并且可以在其中編寫任何可執(zhí)行文件。

npm腳本的退出代碼也遵循shell腳本的規(guī)則。如果退出代碼不是0，則npm將假定腳本執(zhí)行失敗。

3.通配符

由于npm腳本是Shell腳本，因此可以使用Shell通配符。

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

在上面的代碼中，*表示任何文件名，**表示任何子目錄。

如果要將通配符傳遞給原始命令以防止被Shell逸出，則必須逸出星號(hào)。

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

4.傳遞參數(shù)

使用--指示傳遞給npm腳本的參數(shù)。

    "lint": "jshint **.js"

如果將參數(shù)傳遞給上述npm run lint命令，則必須編寫如下。

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

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

    "lint": "jshint **.js",
    "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"

5.執(zhí)行順序

如果要在npm腳本中執(zhí)行多個(gè)任務(wù)，則需要弄清執(zhí)行順序。

如果是并行執(zhí)行（并行并行執(zhí)行），則可以使用＆符號(hào)。

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

如果是順序執(zhí)行（僅在成功執(zhí)行前一個(gè)任務(wù)時(shí)才執(zhí)行下一個(gè)任務(wù)），則可以使用該&&符號(hào)。

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

這兩個(gè)符號(hào)是Bash的功能。另外，您可以使用節(jié)點(diǎn)的任務(wù)管理模塊：script-runner，npm-run-all，redrun。

6.默認(rèn)值

通常，npm腳本由用戶提供。但是，npm為兩個(gè)腳本提供了默認(rèn)值。換句話說，這兩個(gè)腳本無需定義即可直接使用。

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

在上述代碼中，默認(rèn)值npm run start是node server.js，提供有一個(gè)server.js在項(xiàng)目的根目錄腳本; 默認(rèn)值npm run install就是node-gyp rebuild，只要有一個(gè)binding.gyp項(xiàng)目的根目錄下的文件。

7.鉤子

npm腳本有兩個(gè)鉤子：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

當(dāng)用戶執(zhí)行時(shí)，它將按以下順序自動(dòng)執(zhí)行npm run build。

    npm run prebuild && npm run build && npm run postbuild

因此，可以在這兩個(gè)掛鉤中進(jìn)行一些準(zhǔn)備和清理。這是下面的例子。

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

Npm默認(rèn)提供以下鉤子:

• 預(yù)發(fā)布，后發(fā)布
• 預(yù)安裝，后安裝
• preuninstall，postuninstall
• 前版本，后版本
• 前測(cè)，后測(cè)
• 穿越，后停
• 啟動(dòng)前，記錄開始
• 重啟前，重啟后

自定義腳本命令也可以與pre和post掛鉤一起添加。例如，腳本命令myscript具有premyscript和postmyscript鉤子。但是，double pres和posts無效。例如，prepretest和postposttest是無效的。

在npm_lifecycle_event由npm提供的變量返回當(dāng)前運(yùn)行的腳本的名稱，如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!');
    }

 ? 請(qǐng)注意，prepublish掛鉤不僅將在npm publish命令之前運(yùn)行，而且還將在npm install（不帶任何參數(shù)）命令之前運(yùn)行。但是，這種行為很容易使用戶感到困惑，因此npm 4引入了一個(gè)prepare行為類似于的新鉤子prepublish。從npm 5開始，該prepublish鉤子只會(huì)在npm publish命令之前運(yùn)行。 ?

8.縮寫形式

這是四個(gè)常用npm腳本的簡(jiǎn)短版本。

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是實(shí)際執(zhí)行三個(gè)腳本命令的化合物命令：stop，restart，start。并且執(zhí)行順序如下。

• 重新啟動(dòng)
• 調(diào)動(dòng)
• 停
• 郵件停止
• 重新開始
• 預(yù)啟動(dòng)
• 開始
• 郵件開始
• 重啟后

9.變量

npm腳本具有非常強(qiáng)大的功能，可讓您使用npm的內(nèi)部變量。

首先，npm腳本可以獲取package.json帶有npm_package_前綴的字段。例如，package.json下面是一個(gè)。

    {
        "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通過環(huán)境變量process.env對(duì)象獲取的字段值。如果是Bash腳本，則可以使用$npm_package_name和獲得兩個(gè)值$npm_package_version。

該 npm_package_前綴也支持嵌套的package.json領(lǐng)域。

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

在上面的代碼中，您可以使用獲取字段的type屬性。repositorynpm_package_repository_type

這是另一個(gè)例子。

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

在上面的代碼中，npm_package_scripts_install變量的值等于foo.js。

npm config get xxx也可以通過npm_config_前綴獲取npm的配置變量（命令返回的值）。例如，您可以使用獲取當(dāng)前模塊的release標(biāo)簽npm_config_tag。

    "view": "echo $npm_config_tag",

請(qǐng)注意，環(huán)境變量可以覆蓋中的config對(duì)象package.json。

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

在上面的代碼中，npm_package_config_port變量返回8080。并且可以通過以下方法覆蓋此值。

    $ npm config set foo:port 80

env命令可以列出所有環(huán)境變量。

    "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的鏡像源管理工具，有時(shí)候國(guó)外資源太慢，使用這個(gè)就可以快速地在 npm 源間切換。

在命令行執(zhí)行以下命令，全局安裝nrm。

    npm install -g nrm

執(zhí)行命令nrm ls查看可選的源。

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

如果要切換到cnpm源或者其他鏡像，您可以使用nrm use 源名稱進(jìn)行切換：

    nrm use cnpm

你可以增加定制的源，特別適用于添加企業(yè)內(nèi)部的私有源，執(zhí)行命令nrm add <registry> <url>，其中reigstry為源名，url為源的路徑。

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

刪除，執(zhí)行以下命令：

    nrm del <registry> url

你還可以通過 nrm test 測(cè)試相應(yīng)源的響應(yīng)時(shí)間,從而決定使用哪種鏡像！

    nrm test taobao

以上就是10分鐘內(nèi)講解Npm腳本使用教程的詳細(xì)內(nèi)容，更多關(guān)于Npm腳本教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！