NPM Scripts

時間 2019-12-01

標籤 npm scripts 简体版

原文原文鏈接

這是一個簡易的關於npm scripts的小教程css

`什麼是npmscripts?`

npm scripts就是package.json文件裏面，使用scripts字段定義的各類命令前端

{
    "scripts": {
        "build": "node build.js"
    }
 }  
複製代碼

scripts對象能夠有不少個屬性，每一個屬性，對應一段腳本命令。上面的代碼等同於：node

$ npm run build // => node build.js
複製代碼

`npm scripts的原理`

npm scripts的底層實際上是shell在運行腳本，凡是shell能運行的命令，均可以寫在npm scripts裏面git

`修改項目配置項`

經過npm init 或者 npm init -f建立一個package.json項目配置文件github

經過 npm config set init 修改默認項目的配置項typescript

npm config set init.author.name "qiuliming"
npm config set init.author.url "https://github.com/AaronHale"
npm config set init.author.email "AaronHale@gmial.com"
複製代碼

`通配符`

npmscripts可使用shell腳本的通配符*shell

"lint": "eslint *.js"    //*任意文件
"lint": "eslint **/*.js" //**任意目錄

複製代碼

`腳本運行傳遞參數使用--`

"lint": "eslint *.js"

$ npm run lint -- --fix
複製代碼

`添加運行註釋`

能夠在package.json 中添加已 // 爲鍵的註釋：npm

"//": "eslint檢查"
"eslint": "eslint *.js"
複製代碼

或者在命令前面加註釋json

"eslint": "#eslint檢查 \n eslint *.js"  
複製代碼

`npmscript運行時日誌輸出`

默認日誌，不用加任何參數
沒有消息就是最好的消息 --loglevel silent，或者 --silent 更簡單的-s
儘量多的顯示更多的日誌 --loglevel verbose，或者 --verbose，或者更簡單的 -d

`鉤子`

pre
post

關於鉤子這一塊，在某些操做前須要作檢查、某些操做後須要作清理的狀況下很是有用。具體的使用場景，你們能夠自行百度，這裏就不作詳細展開了sass

`使用變量`

預約義變量

通多npm run env 能夠獲取到全部變量列表：

npm_package_author_email=AaronHale@gmail.com
npm_package_author_name=AaronHale
npm_package_author_url=http://github.com/AaronHale
.....
.....
複製代碼

變量的使用方法遵循 shell 裏面的語法，直接在 npm script 給想要引用的變量前面加上 $ 符號便可

{
  "dummy": "echo $npm_package_name"
}
複製代碼

自定義變量

除了預約義變量外，咱們還能夠在 package.json 中添加自定義變量，而且在 npm script 中使用這些變量。

"port": {
    "env": "7890",
    "prod": "80"
}
複製代碼

`命令自動補全`

npm completion 集成到shell
zsh-better-npm-completion插件

npm 自身提供了自動完成工具 completion，將其集成到 bash 或者 zsh 裏也很是容易官方文檔裏面的集成方法以下：

npm completion >> ~/.bashrc
npm completion >> ~/.zshrc
複製代碼

`跨平臺兼容`

文件系統操做的跨平臺兼容
- rimraf 或 del-cli，用來刪除文件和目錄，實現相似於 rm -rf 的功能；
- cpr，用於拷貝、複製文件和目錄，實現相似於 cp -r 的功能；
- make-dir-cli，用於建立目錄，實現相似於 mkdir -p 的功能；
用 cross-var 引用變量
- 安裝cross-var爲開發依賴
- 改寫引用變量 npm script，根據cross-var規範
用 cross-env 設置環境變量
- 添加 cross-env 到開發依賴
- 改寫使用了環境變量的 npm script

`npm script 拆到單獨文件中`

藉助 scripty 咱們能夠將 npm script 剝離到單獨的文件中，從而把複雜性隔到單獨的模塊裏面，讓代碼總體看起來更加清晰:

將scripty安裝爲咱們開發依賴，準備目錄和文件，並作相關配置便可
準備相關文件和目錄
修改 scripty 腳本

`文件監聽，自動運行npmscripts`

擁抱現代前端工做流的同窗都會有代碼風格檢查、單元測試等環節，這樣就很須要在代碼變動以後當即獲得反饋，如代碼改動致使了那個 Case 失敗，哪塊不符合團隊的編碼規範等

單元測試自動化添加--watch 參數
代碼檢查自動化

咱們使用的代碼檢查工具 stylelint、eslint、jsonlint 不全支持 watch 模式，能夠藉助 onchange 工具包來實現，onchange 能夠方便的讓咱們在文件被修改、添加、刪除時運行須要的命令。

`使用 livereload 實現自動刷新`

安裝livereload 和 http-server 爲項目依賴
添加 npm script

"client": "npm-run-all --parallel client:*",
"client:reload-server": "livereload client/",
"client:static-server": "http-server client/"
複製代碼

在頁面中嵌入 livereload 腳本

<body>
   <h2>LiveReload Demo</h2>
  <script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
  </script>
 </body>
複製代碼