一. 先了解一下package.json

每個(gè)項(xiàng)目的根目錄都有一個(gè) package.json 文件，定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息,下面是一個(gè)比較完整的package.json文件

{
 "name": "vue-cli",
 "version": "2.9.3",
 "description": "A simple CLI for scaffolding Vue.js projects.",
 "preferGlobal": true,
 "bin": {
 "vue": "bin/vue",
 "vue-init": "bin/vue-init",
 "vue-list": "bin/vue-list"
 },
 "repository": {
 "type": "",
 "url": ""
 },
 "keywords": [
 ],
 "author": "litongqian",
 "license": "MIT",
 "bugs": {
 "url": ""
 },
 "homepage": "",
 "scripts": {
 "test": "npm run lint && npm run e2e",
 "start": "node index.js"
 },
 "dependencies": {
 "async": "^2.4.0",
 "chalk": "^2.1.0",
 },
 "devDependencies": {
 "chai": "^4.1.2",
 "eslint": "^3.19.0",
 },
 "engines": {
 "node": ">=6.0.0"
 }
}

1. 其中scripts字段

指定了運(yùn)行腳本命令的npm命令行縮寫，比如start指定了運(yùn)行 npm run start 時(shí)，所要執(zhí)行的命令。

2. bin字段

bin項(xiàng)用來指定各個(gè)內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置

"bin": {
 "vue": "bin/vue",
 "vue-init": "bin/vue-init",
 "vue-list": "bin/vue-list"
 },

上面代碼指定， vue 命令對應(yīng)的可執(zhí)行文件為 bin 子目錄下的 vue 。

3. npm link

開發(fā)NPM模塊的時(shí)候，有時(shí)我們會(huì)希望，邊開發(fā)邊試用，比如本地調(diào)試的時(shí)候， require('myModule') 會(huì)自動(dòng)加載本機(jī)開發(fā)中的模塊。Node規(guī)定，使用一個(gè)模塊時(shí)，需要將其安裝到全局的或項(xiàng)目的 node_modules 目錄之中。對于開發(fā)中的模塊，解決方法就是在全局的 node_modules 目錄之中，生成一個(gè)符號(hào)鏈接，指向模塊的本地目錄。

npm link 就能起到這個(gè)作用，會(huì)自動(dòng)建立這個(gè)符號(hào)鏈接。

請?jiān)O(shè)想這樣一個(gè)場景，你開發(fā)了一個(gè)模塊 myModule ，目錄為 src/myModule ，你自己的項(xiàng)目 myProject 要用到這個(gè)模塊，項(xiàng)目目錄為 src/myProject 。首先，在模塊目錄（ src/myModule ）下運(yùn)行 npm link 命令。

src/myModule$ npm link

上面的命令會(huì)在NPM的全局模塊目錄內(nèi)，生成一個(gè)符號(hào)鏈接文件，該文件的名字就是 package.json 文件中指定的模塊名。

/path/to/global/node_modules/myModule -> src/myModule

這個(gè)時(shí)候，已經(jīng)可以全局調(diào)用 myModule 模塊了。但是，如果我們要讓這個(gè)模塊安裝在項(xiàng)目內(nèi)，還要進(jìn)行下面的步驟。

切換到項(xiàng)目目錄，再次運(yùn)行 npm link 命令，并指定模塊名。

src/myProject$ npm link myModule

上面命令等同于生成了本地模塊的符號(hào)鏈接。

然后，就可以在你的項(xiàng)目中，加載該模塊了。

var myModule = require('myModule');

這樣一來， myModule 的任何變化，都可以直接反映在 myProject 項(xiàng)目之中。但是，這樣也出現(xiàn)了風(fēng)險(xiǎn)，任何在 myProject 目錄中對 myModule 的修改，都會(huì)反映到模塊的源碼中。

如果你的項(xiàng)目不再需要該模塊，可以在項(xiàng)目目錄內(nèi)使用 npm unlink 命令，刪除符號(hào)鏈接。

src/myProject$ npm unlink myModule

二. 可執(zhí)行腳本

寫一個(gè)簡單的腳本hello

$ mkdir hello #創(chuàng)建一個(gè)文件夾

$ cd hello && touch hello #創(chuàng)建命令文件

#!/usr/bin/env node
console.log('hello world');

文件的頭部務(wù)必加入#!/usr/bin/env node這行代碼，這里表示使用node作為腳本的解釋程序，node的路徑通過env來查找，可以避免node安裝路徑不一帶來的問題。

打開 /usr/bin/env,可以查看到PATH,操作系統(tǒng)通過路徑找到node

然后，修改 hello 的權(quán)限。

$ chmod 755 hello
$./hello

如果想把 hello 前面的路徑去除，可以將 hello 的路徑加入環(huán)境變量 PATH。但是，另一種更好的做法，是在當(dāng)前目錄下新建 package.json ，寫入下面的內(nèi)容。

{
 "name": "hello",
 "bin": {
 "hello": "./hello"
 }
}

然后執(zhí)行 npm link 命令。不明白的看上面

$ npm link

執(zhí)行后會(huì)產(chǎn)生一個(gè)全局的映射關(guān)系,就可以全局使用hello命令了

三.命令行參數(shù)

命令行參數(shù)可以用系統(tǒng)變量 process.argv 獲取。

修改hello腳本

#!/usr/bin/env node
console.log('hello ', process.argv);

其中process為node進(jìn)程中的全局變量，process.argv為一數(shù)組，數(shù)組內(nèi)存儲(chǔ)著命令行的各個(gè)部分，argv[0]為node的安裝路徑，argv[1]為主模塊文件路勁，剩下為子命令或參數(shù)，如下：

$ hello a b c

# process.argv的值為[ '/usr/local/bin/node', '/usr/local/bin/hello', 'a', 'b', 'c' ]

腳本可以通過 child_process 模塊新建子進(jìn)程，從而執(zhí)行 Unix 系統(tǒng)命令,修改hello

exec 方法用于執(zhí)行bash命令, exec 方法最多可以接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是所要執(zhí)行的shell命令，第二個(gè)參數(shù)是回調(diào)函數(shù)，該函數(shù)接受三個(gè)參數(shù)，分別是發(fā)生的錯(cuò)誤、標(biāo)準(zhǔn)輸出的顯示結(jié)果、標(biāo)準(zhǔn)錯(cuò)誤的顯示結(jié)果。

#!/usr/bin/env node
var name = process.argv[2];
var exec = require('child_process').exec;

var child = exec('echo hello ' + name, function(err, stdout, stderr) {
 if (err) throw err;
 console.log(stdout);
});

執(zhí)行$ hello litongqian

如果我們想查看所有文件,修改hello

var name = process.argv[2];
var exec = require('child_process').exec;

var child = exec(name, function(err, stdout, stderr) {
 if (err) throw err;
 console.log(stdout);
});

執(zhí)行$ hello ls 

hello目錄下有三個(gè)文件

四、shelljs 模塊

shell.js 模塊重新包裝了 child_process，調(diào)用系統(tǒng)命令更加方便。它需要安裝后使用。

npm install --save shelljs

然后，改寫腳本。

#!/usr/bin/env node
var name = process.argv[2];
var shell = require("shelljs");

shell.exec("echo hello " + name);

五、yargs 模塊

shelljs 只解決了如何調(diào)用 shell 命令，而 yargs 模塊能夠解決如何處理命令行參數(shù)。它也需要安裝。

$ npm install --save yargs

yargs 模塊提供 argv 對象，用來讀取命令行參數(shù)。請看改寫后的 hello 。

#!/usr/bin/env node
var argv = require('yargs').argv;

console.log('hello ', argv.name);

使用時(shí)，下面兩種用法都可以。

$ hello --name=tom
hello tom

$ hello --name tom
hello tom

也就是說，process.argv 的原始返回值如下。

$ node hello --name=tom
[ 'node',
 '/usr/local/bin/hell',
 '--name=tom' ]

yargs 可以上面的結(jié)果改為一個(gè)對象，每個(gè)參數(shù)項(xiàng)就是一個(gè)鍵值對。

六.發(fā)布命令包

通過npm publish進(jìn)行發(fā)布，前提是有npm帳號(hào)。如何操作可以查看npm 官方文檔。

本文是通過原生node.js來開發(fā)命令工具，而vue-cli是采用commander.js來簡化命令工具開發(fā),

了解了執(zhí)行流程,去學(xué)習(xí)對應(yīng)的模塊,就很好知道原理了!,本文拋個(gè)磚頭

最后:有時(shí)我們用到的命令行不是全局安裝的,而是本地安裝的

1. package.json bin字段

bin項(xiàng)用來指定各個(gè)內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置。

"name":"someTool",
"bin": {
 "someTool": "./bin/someTool.js"
}

上面代碼指定，someTool 命令對應(yīng)的可執(zhí)行文件為 bin 子目錄下的 someTool.js。

當(dāng)一個(gè)項(xiàng)目依賴上面的someTool工具時(shí),同時(shí)只是本地安裝

{
 "name": "myproject",
 "devDependencies": {
 "someTool": "latest"
 },
 "scripts": {
 start: 'someTool build' //等同于start: './node_modules/someTool/someTool.js build'

 }
}

npm會(huì)尋找這個(gè)文件，在 node_modules/.bin/ 目錄下建立符號(hào)鏈接。在上面的例子中，someTool.js會(huì)建立符號(hào)鏈接 npm_modules/.bin/someTool 。由于 node_modules/.bin/ 目錄會(huì)在運(yùn)行時(shí)加入系統(tǒng)的PATH變量，因此在運(yùn)行npm時(shí)，就可以不帶路徑，直接通過命令來調(diào)用這些腳本。

因此，像上面這樣的寫法可以采用簡寫。

scripts: { 
 start: './node_modules/someTool/someTool.js build'
}

// 簡寫為

scripts: { 
 start: 'someTool build'
}

所有 node_modules/.bin/ 目錄下的命令，都可以用 npm run [命令] 的格式運(yùn)行。在命令行下，鍵入 npm run ，然后按tab鍵，就會(huì)顯示所有可以使用的命令。

1. npm run

上面代碼中， scripts 字段指定了兩項(xiàng)命令 start ，輸入 npm run-script start 或者 npm run start ，就會(huì)執(zhí)行  someTool build 。 npm run 是 npm run-script 的縮寫，一般都使用前者，但是后者可以更好地反應(yīng)這個(gè)命令的本質(zhì)。

npm run 命令會(huì)自動(dòng)在環(huán)境變量 $PATH 添加 node_modules/.bin 目錄，所以 scripts 字段里面調(diào)用命令時(shí)不用加上路徑，這就避免了全局安裝NPM模塊。

npm run 如果不加任何參數(shù)，直接運(yùn)行，會(huì)列出 package.json 里面所有可以執(zhí)行的腳本命令。

npm內(nèi)置了兩個(gè)命令簡寫， npm test 等同于執(zhí)行 npm run test ， npm start 等同于執(zhí)行 npm run start 。

npm run 會(huì)創(chuàng)建一個(gè)Shell，執(zhí)行指定的命令，并臨時(shí)將 node_modules/.bin 加入PATH變量，這意味著本地模塊可以直接運(yùn)行。

舉例來說，你執(zhí)行ESLint的安裝命令。

$ npm i eslint --save-dev

運(yùn)行上面的命令以后，會(huì)產(chǎn)生兩個(gè)結(jié)果。首先，ESLint被安裝到當(dāng)前目錄的 node_modules 子目錄；其次， node_modules/.bin 目錄會(huì)生成一個(gè)符號(hào)鏈接 node_modules/.bin/eslint ，指向ESLint模塊的可執(zhí)行腳本。

然后，你就可以在 package.json 的 script 屬性里面，不帶路徑的引用 eslint 這個(gè)腳本。

{
 "name": "Test Project",
 "devDependencies": {
 "eslint": "^1.10.3"
 },
 "scripts": {
 "lint": "eslint ."
 }
}

等到運(yùn)行 npm run lint 的時(shí)候，它會(huì)自動(dòng)執(zhí)行 ./node_modules/.bin/eslint . 。

如果直接運(yùn)行 npm run 不給出任何參數(shù)，就會(huì)列出 scripts 屬性下所有命令。

$ npm run
Available scripts in the user-service package:
 lint
  jshint **.js
 test
 mocha test/

到此,結(jié)束!以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。