拾遺記5-工程化補充

npx

npx是npm 5.2版本以後附帶的一個命令，經過npx能夠解決項目開發過程當中的問題。

• 避免全局安裝模塊

npm不提倡全局安裝模塊，全局安裝會形成一些問題，主要問題以下：

1. 全局安裝的模塊會存放到本地的一個全局目錄中，隨着全局模塊數量增長，佔用空間會變大。
2. 全局模塊安裝以後，當模塊發佈新的版本以後，須要手動更新模塊。
3. 若是在項目中使用全局模塊，會形成項目和本地模塊之間的關聯，也就是若是別人使用該項目，須要手動安裝全部依賴的全局模塊，而不是經過簡單的npm install就能夠安裝全部依賴模塊。

使用npx命令就能夠避免這個問題，npx能夠遠程執行命令。即npx會將你使用的模塊下載安裝到本地的臨時目錄，使用以後會刪除臨時目錄中的模塊。

如安裝vue項目的時候，使用npm安裝須要兩個步驟：

1. 安裝腳手架工具 npm install -g @vue/cli。
2. 利用腳手架工具建立項目 vue create my-vue-app

使用npx：
執行npm @vue/cli create my-vue-app便可建立項目。

• 調用項目安裝模塊

若是在項目中安裝了某個模塊，如npm install --save-dev grunt，npm沒法直接調用這個模塊。若是想要調用能夠用如下兩種方式：

1. 將grunt命令添加到npm scripts中。
2. 命令行運行node_modules/.bin/grunt --version 調用。

若是使用npx命令，那麼npx會自動到node_modules/.bin路徑和環境變量$PATH裏面，檢查命令是否存在，因此直接執行npx grunt --version便可調用模塊。

gh-pages

利用github提供的gh-pages分支能夠快速發佈本身的靜態項目。

發佈靜態項目的步驟：

1. git clone 拷貝託管在github上面的項目。
2. 安裝依賴包並打包項目。
3. 建立gh-pages分支，並將dist目錄下的文件推送到此分支。

完成上面三個步驟以後，就完成了靜態項目發佈，經過特定url就能夠訪問此靜態項目。

github actions

在github中，持續集成中的每個步驟，如抓取代碼、運行測試、發佈到第三方服務就叫作action。持續集成是由多個action配合完成的。

• workflow

工做流：表示持續集成從開始到結束的一次運行過程。

• job

任務：表示持續集成過程當中須要完成的任務，一次持續集成能夠完成多個任務。

• step

步驟：一個任務能夠有多個步驟，這些步驟依次執行。

• action

動做： 每一個步驟包含多個動做。

下面的例子是爲github項目添加一個基本的action，當每次代碼更新後，會自動構建並將dist目錄下的文件推送到gh-pages分支。

# 構建工做流名稱
name: publish vue project
# 定義在哪一個時機下會自動構建
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# 定義構建任務
jobs:
  # 任務名稱
  build:
    # 構建器類型
    runs-on: ubuntu-latest
    # 步驟
    steps:
    # 拉取master分支
    - uses: actions/checkout@master
    - name: build and publish
      # 利用成熟的action執行構建任務
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.test }}
        BRANCH: gh-pages
        FOLDER: dist
        BUILD_SCRIPT: npm install && npm run build

npm scripts

npm 容許在package.json中，經過scripts字段定義腳本命令。

以下：

"scripts": {
  "test": "echo \"this is a test\""
}

在命令行中執行npm run test，便可輸出this is a test。

調用模塊命令

npm腳本命令在運行的時候會自動將node_modules/.bin目錄臨時添加到PATH環境變量中，所以能夠經過腳本命令調用模塊安裝的命令。

如在項目中經過npm install --save-dev -grunt安裝模塊，那麼在scripts腳本中，便可直接調用該模塊提供的grunt命令：

"scripts": {
  "test": "grunt --version"
}

執行順序

能夠經過 & 和 && 定義腳本命令中多個任務的執行順序

• & 並行執行

"scripts": {
  "test": "node ./test1.js & node ./test2.js"
}

表示 node ./test1.js和node ./test2.js兩個任務會同時執行。

• && 順序執行

"scripts": {
  "test": "node ./test1.js && node ./test2.js"
}

表示 node ./test1.js和node ./test2.js兩個任務會依次執行。

鉤子pre post

npm爲腳本命令提供了兩個鉤子：pre和post，即若是在scripts字段中定義了pretest、test、posttest三個命令，那麼當執行npm run test命令的時候，npm會首先執行pretest命令，再執行test命令，最後執行posttest命令。

獲取變量

能夠在npm腳本命令中經過npm_package_前綴獲取package.json中的變量。

如package.json:

{
  "name": "npm-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在test.js腳本中：

console.log(process.env.npm_package_name)

在腳本命令中：

"scripts": {
  "test": "node test.js",
}

當運行命令的時候，能夠在控制檯輸出package.json中name字段的值。

識別命令

在npm腳本中能夠經過npm_lifecycle_event返回當前正在運行的腳本名稱。

在test.js腳本中：

console.log(process.env.npm_lifecycle_event)

在腳本命令中：

"scripts": {
  "test": "node test.js",
}

當運行命令的時候，能夠在控制檯輸出當前正在執行的命令test。