前端自動化 shell 腳本命令 與 shell-node 腳本命令 簡單使用 之 es6 轉譯

（背景： 先用 babel 轉譯 es6 再 用 browserify 打包 模塊化文件，來解決瀏覽器不支持模塊化 ）
（Browserify是一個讓node模塊可以用在瀏覽器中的神奇工具）

今天折騰了一上午，對於前端好多自動化管理的命令用起來，步驟甚多，故想寫一個腳本文件，將項目所需要執行到命令 都 寫在一個腳本文件中，在命令行 只需寫一個命令即 完成所有事情。
配置的環境： node + git
1.第一步：在項目根目錄下 新建 package.json 配置文件

{
  "name": "shell-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.23.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0"
  }
}

 

("這些腳本可以是行內bash命令，或者也可以指向可執行的命令行文件。你還可以在腳本內引用其他npm腳本");
一：shell 腳本 :
文件名：test.sh 位置：項目根目錄

#!/bin/bash
#the first program
echo -e "\e[1;34m hello shell \e[0m"
npm run es && npm run browserify

 

shell 腳本運行 ： bash test.sh

二：shell-node 腳本
注：用 js 語法寫的 命令行 腳本
文件名：hello.sh 位置：項目根目錄

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

 

在項目根目錄 打開 git bash ,可在 package.json 中 添加 這樣一段 bin 代碼：

"bin":{
    "hello": "./hello.sh"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify"
  },

 

命令行 輸入 , npm link 可以全局使用， 使用 時 ，在 命令行 直接 輸入 hello 即可 執行 此 腳本文件。
<h5>移除此 全局命令 ：</h5>在此腳本文件的根目錄 打開 git bash 命令行 輸入： npm remove -g

三：'onchange 插件 監視 文件變化 自動執行 腳本的合並任務'
package.json 配置 如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify",
    "watch": "onchange src/js/*.js -- npm run build"
  },
  "devDependencies": {
    "onchange": "^3.2.1"
}

 

相關文章部分內容：
變更監控

至此，我們的任務不斷的需要對文件做一些變更，我們不斷的需要切回命令行去運行相應的任務。針對這個問題，我們可以添加一個任務來監聽文件變更，讓文件在變更的時候自動執行這些任務。這里我推薦使用onchange插件，安裝方法如下：

npm i -D onchange

讓我們來給CSS和JavaScript設置監控任務：

"scripts": {
  ...
  "watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
  "watch:js": "onchange 'src/js/*.js' -- npm run build:js",
}

 

這些任務可以分解如下：onchange需要你傳參想要監控的文件路徑（字符串），這里我們傳的是SCSS和JS源文件，我們想要運行的命令跟在--之后，這個命令當路徑內的文件發生增刪改的時候就會被立即執行。
讓我們再添加一個監控命令來完成我們的npm scripts構建過程。

再添加一個包，parallelshell：

npm i -D parallelshell

再次給scriopts對象添加一個新任務：

"scripts": {
  ...
  "watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'"
}

 

parallelshell支持多個參數字符串，它會給npm run傳多個任務用於執行。

寫在最后 ：
開發環境里 將 jQuery 通過 npm 包管理工具下載，需要用到的文件頂部將其 引入 es6 引入 使用 ：

import "babel-polyfill";
import $ from "jquery";
import {firstName, lastName, year} from './profile';

$('h1').css({"color":"red"});
.....

 

package.json 最終 事例：

{
  "name": "shell-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "es": "babel src/js -d build",
    "browserify": "browserify build/index.js > bundle.js",
    "build": "npm run es && npm run browserify",
    "watch": "onchange src/js/*.js -- npm run build"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-core": "^6.23.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "browserify": "^14.1.0",
    "jquery": "^3.1.1",
    "onchange": "^3.2.1"
  }
}

 

.babelrc 內容 事例：

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

 

最后 通過 上文 所闡述的 方法 將其 使用，提高 開發效率 ： 用 babel 轉譯 再 用 browserify 將 js 打包 成 一個 js 文件 ，最終 html 引入 使用 。