讓NodeJS在你的項目中發光發熱

時間  2019-11-06
標籤 nodejs 項目 發光 發熱 简体版
原文   原文鏈接

近些年來藉着NodeJS的春風，前端經歷了一波大洗牌式得的發展。使得前端開發在效率，質量上有了質的飛躍。能夠說NodeJS已是前端不可欠缺的技能了。可是是事實上大部分的前端對於本地安裝的NodeJS的使用可能僅限於node -v和npm了😂。其實NodeJS做爲真正意義上的服務端語言，在咱們開發的時候能夠運用NodeJS強大的模塊和衆多的npm包來爲咱們本身服務。html

寫在前面

注意：這篇文章基本上不會去將一些很是基礎的東西，但願你們自備ES6+語法， NodeJS基礎， 簡單的Linux操做等知識。還有這篇文章側重點不會放在技術的實現細節，主要是提供一些思路和方向。更加深層次的使用，仍是要各位朋友本身去挖掘。並且這篇文章會有點長🎫前端

快速建立模塊

這個部分我以前在加快Vue項目的開發速度中提到過，不過那個版本寫的比較簡單(糙)，並且基本全都都是經過Node寫的。說白了就是用NodeJS去代替咱們生成須要複製粘貼的代碼。vue

在大型的項目中，尤爲是中後臺項目在開發一個新的業務模塊的時候可能離不開大量的複製粘貼，像中後臺項目中可能不少模塊都是標準的CURD模塊，包括了列表，新增，詳情，編輯這些頁面。那麼這就意味着有大量的重複代碼存在，每次複製粘貼完以後還有修修改改刪刪等一大堆麻煩事兒，最重要的是複製粘貼很容易忘記哪一部分就忘記改了，致使項目作的很糙並且也會浪費很多時間。那咱們的需求就是把人工複製粘貼的那部分交給Node去作，力求時間和質量獲得雙重的保障。node

以前在Vue項目中寫過這個模塊，那接下來的demo咱們以一個Vue項目來作示例，項目地址。webpack

前期準備

  • 文件結構劃分：視圖文件，路由文件，Controler文件該怎麼放必定要劃分清楚。這個就像是地基，能夠根據本身項目的業務去劃分，咱們的項目目錄是下面這樣劃分git

    vue-base-template
  │   config                            // webpack配置config/q其餘一些config文件
  │   scripts                           // 幫助腳本文件 ===> 這裏存放咱們的項目腳本文件
  │   │   template                      // 模塊文件
  │   │   build-module.js               // build構建腳本
  │   │   
  └───src                               // 業務邏輯代碼
  │   │   api                           // http api 層
  │   └── router                        // 路由文件
  │   │     │  modules                  // 業務路由文件夾  ==> 業務模塊路由生成地址
  │   │           │ module.js           // 制定模塊
  │   │   store                         // vuex
  │   └── views                         // 視圖文件
  │   │     │  directory                // 抽象模塊目錄
  │   │     │      │  module            // 具體模塊文件夾
  │   │     │      │    │ index.vue     // 視圖文件
  │   │   global.js                     // 全局模塊處理
  │   │   main.js                       // 入口文件

    業務模塊我基本上是經過抽象模塊+具體模塊的方式去劃分：程序員

    • 抽象模塊：在這裏指的是沒有具體的功能頁面只是一系列業務模塊的彙總，至關於一個包含各個具體模塊的目錄。
    • 具體模塊：指的是有具體功能頁面的模塊，包含着各個具體的頁面。

這個劃分方式很靈活，主要是根據本身的需求來。github

  • 定製模板文件：主要是用於生成文件的模板 好比.vue這種文件

  • 技術準備：web

    理論上來說咱們須要用到如下一些npm模塊, 起碼要知道這個都是幹什麼的vuex

  • 建立流程

    流程很簡單我畫的也很差，湊合看吧。抽空我會從新畫的😂

    ![流程圖](./images/process.png '流程圖')

開始擼

自從有了這個想法以後， 這個腳本到如今已是我第三遍擼了。從第一次的單一簡單，到如今的功能完善。我最大的感觸就是這個東西開發起來好像沒有什麼盡頭，每一次都能找到不同的需求點，每次都能找到能夠優化的部分。針對本身的項目，腳本能夠很簡單也能夠很複雜。很魔性， 對我來講確定還有第四次第五次的重構。

爲了後期的維護，我把全部的腳本相關NodeJS代碼放到了根目錄下的scripts文件夾中

scripts                             // 幫助腳本文件 ===> 這裏存放咱們的項目腳本文件
└───template                        // template管理文件夾
│   │   index.js                    // 模塊文件處理中心
│   │   api.template.js             // api模塊文件
│   │   route.template.js           // route模塊文件
│   │   template.vue                // view模塊文件
│   build-module.js                 // 建立腳本入口文件
│   │   
|   .env.local                      // 本地配置文件
│   │                               
│   util.js                         // 工具文件

下面咱們一個部分一個部分的來說這些文件的做用(<font color="red">大量代碼預警</font>)

  • build-module.js: 入口文件， 與使用者進行交互的腳本。 經過問答的方式獲得咱們須要的三個核心變量目錄(抽象模塊), 模塊(具體模塊), 註釋。若是是第一次執行這個腳本， 那麼還會有配置相關的問題， 第一次設置完以後接下來的使用將不會再詢問，若想修改可本身修改.env.local文件。這裏我不詳細描述了， 大部分解釋都寫在註釋裏面了。

第一部分 配置文件已經輸入項處理部分

const inquirer = require('inquirer')
const path = require('path')
const { Log, FileUtil, LOCAL , ROOTPATH} = require('./util')
const { buildVueFile, buildRouteFile, buildApiFile, RouteHelper } = require('./template')
const EventEmitter = require('events');
// file options
const questions = [
  {
    type: 'input',
    name: 'folder',
    message: "請輸入所屬目錄名稱(英文，若是檢測不到已輸入目錄將會默認新建，跳過此步驟將在Views文件夾下建立新模塊)："
  },
  {
    type: 'input',
    name: 'module',
    message: "請輸入模塊名稱（英文）",
    // 格式驗證
    validate: str => ( str !== '' && /^[A-Za-z0-9_-]+$/.test(str))
  },
  {
    type: 'input',
    name: 'comment',
    message: "請輸入模塊描述(註釋)："
  },
]
// local configs 
const configQuestion = [
  {
    type: 'input',
    name: 'AUTHOR',
    message: "請輸入做者（推薦使用拼音或者英文）",
    // 格式驗證
    validate: str => ( str !== '' && /^[\u4E00-\u9FA5A-Za-z]+$/.test(str)),
    when: () => !Boolean(process.env.AUTHOR)
  },
  {
    type: 'input',
    name: 'Email',
    message: "請輸入聯繫方式（郵箱/電話/釘釘）"
  }
]
// Add config questions if local condfig does not exit
if (!LOCAL.hasEnvFile()) {
  questions.unshift(...configQuestion)
}
// 獲取已經完成的答案
inquirer.prompt(questions).then(answers => {
  // 1: 日誌打印
  Log.logger(answers.folder == '' ? '即將爲您' : `即將爲您在${answers.folder}文件夾下` + `建立${answers.module}模塊`)
  // 2: 配置文件的相關設置
  if (!LOCAL.hasEnvFile()) {
    LOCAL.buildEnvFile({
      AUTHOR: answers.AUTHOR,
      Email: answers.Email
    })
  }
  // 3: 進入文件和目錄建立流程
  const {
    folder, // 目錄
    module, // 模塊
    comment // 註釋
  } = answers
  buildDirAndFiles(folder, module, comment)
})
// 事件處理中心
class RouteEmitter extends EventEmitter {}
// 註冊事件處理中心
const routeEmitter = new RouteEmitter() 
routeEmitter.on('success', value => {
  // 建立成功後正確退出程序
  if (value) {
    process.exit(0)
  }
})

第二部分 實際操做部分

// module-method map
// create module methods
const generates = new Map([
  // views部分
  // 2019年6月12日17:39:29 完成
  ['view', (folder, module, isNewDir , comment) => {
    // 目錄和文件的生成路徑
    const folderPath = path.join(ROOTPATH.viewsPath,folder,module)
    const vuePath = path.join(folderPath, '/index.vue')
    // vue文件生成
    FileUtil.createDirAndFile(vuePath, buildVueFile(module, comment), folderPath)
  }],
  // router is not need new folder
  ['router', (folder, module, isNewDir, comment) => {
    /**
     * @des 路由文件和其餘的文件生成都不同， 若是是新的目錄那麼生成新的文件。
     * 可是若是module所在的folder 已經存在了那麼就對路由文件進行注入。
     * @reason 由於咱們當前項目的目錄分層結構是按照大模塊來劃分， 即src下一個文件夾對應一個router/modules中的一個文件夾
     * 這樣作使得咱們的目錄結構和模塊劃分都更加的清晰。
     */
    if (isNewDir) {
      // 若是folder不存在 那麼直接使用module命名 folder不存在的狀況是直接在src根目錄下建立模塊
      const routerPath = path.join(ROOTPATH.routerPath, `/${folder || module}.js`)
      FileUtil.createDirAndFile(routerPath, buildRouteFile(folder, module, comment))
    } else {
      // 新建路由helper 進行路由注入
      const route = new RouteHelper(folder, module, routeEmitter)
      route.injectRoute()
    }
  }],
  ['api', (folder, module, isNewDir, comment) => {
    // inner module will not add new folder
    // 若是當前的模塊已經存在的話那麼就在當前模塊的文件夾下生成對應的模塊js
    const targetFile = isNewDir ? `/index.js` : `/${module}.js`
    // 存在上級目錄就使用上級目錄  不存在上級目錄的話就是使用當前模塊的名稱進行建立
    const filePath = path.join(ROOTPATH.apiPath, folder || module)
    const apiPath = path.join(filePath, targetFile)
    FileUtil.createDirAndFile(apiPath, buildApiFile(comment), filePath)
  }]
])
/**
 * 經過咱們詢問的答案來建立文件/文件夾
 * @param {*} folder 目錄名稱
 * @param {*} module 模塊名稱
 * @param {*} comment 註釋
 */
function buildDirAndFiles (folder, module, comment) {
  let _tempFloder = folder || module // 臨時文件夾 若是當前的文件是
  let isNewDir
  // 若是沒有這個目錄那麼就新建這個目錄
  if (!FileUtil.isPathInDir(_tempFloder, ROOTPATH.viewsPath)) {
    rootDirPath = path.join(ROOTPATH.viewsPath, _tempFloder)
    // create dir for path
    FileUtil.createDir(rootDirPath)
    Log.success(`已建立${folder ? '目錄' : "模塊"}${_tempFloder}`)
    isNewDir = true
  } else {
    isNewDir = false
  }
  // 循環操做進行
  let _arrays = [...generates]
  _arrays.forEach((el, i) => {
    if (i < _arrays.length) {
      el[1](folder, module, isNewDir, comment)
    } else {
      Log.success("模塊建立成功!")
      process.exit(1)
    }
  })
}

注： 這裏我用了一個generates這個Map去管理了全部的操做，由於上一個版本是這麼寫我懶得換了，你也能夠用一個二維數組或者是對象去管理， 也省的寫條件選擇了。

  • template: 管理着生成文件使用的模板文件（vue文件，路由文件， api文件），咱們只看其中的route.template.js，其餘的部分能夠參考項目
/*
 * @Author: _author_
 * @Email: _email_
 * @Date: _date_
 * @Description: _comment_
 */
export default [
  {
    path: "/_mainPath",
    component: () => import("@/views/frame/Frame"),
    redirect: "/_filePath",
    name: "_mainPath",
    icon: "",
    noDropdown: false,
    children: [
      {
        path: "/_filePath",
        component: () => import("@/views/_filePath/index"),
        name: "_module",
        meta: {
          keepAlive: false
        }
      }
    ]
  }
]

在template中最重要的要屬index.js了， 這個文件主要是包含了模板文件的讀取和從新生成出咱們須要的模板字符串, 以及生成咱們須要的特定路由代碼。template/index.js,文件模板的生成主要是經過讀取各個模板文件並轉化成字符串，並把的指定的字符串用咱們指望的變量去替換， 而後返回新的字符串給生成文件使用。

const fs = require('fs')
const path = require('path')
const os = require('os')
const readline = require('readline')
const {Log, DateUtil, StringUtil , LOCAL, ROOTPATH} = require('../util')
/**
 * 替換做者/時間/日期等等通用註釋
 * @param {*string} content 內容
 * @param {*string} comment 註釋
 * @todo 這個方法還有很大的優化空間
 */
const _replaceCommonContent = (content, comment) => {
  if (content === '') return ''
  // 註釋對應列表 comments =  [ [文件中埋下的錨點, 將替換錨點的目標值] ]
  const comments = [
    ['_author_', LOCAL.config.AUTHOR],
    ['_email_', LOCAL.config.Email],
    ['_comment_', comment],
    ['_date_', DateUtil.getCurrentDate()]
  ]
  comments.forEach(item => {
    content = content.replace(item[0], item[1])
  })
  return content
}
/**
 * 生成Vue template文件
 * @param {*} moduleName 模塊名稱
 * @returns {*string}
 */
module.exports.buildVueFile = (moduleName, comment) => {
  const VueTemplate = fs.readFileSync(path.resolve(__dirname, './template.vue'))
  const builtTemplate = StringUtil.replaceAll(VueTemplate.toString(), "_module_", moduleName)
  return _replaceCommonContent(builtTemplate, comment)
}
/**
 * @author: etongfu
 * @description: 生成路由文件
 * @param {string} folder 文件夾名稱 
 * @param {string} moduleName 模塊名稱
 * @returns  {*string}
 */
module.exports.buildRouteFile = (folder,moduleName, comment) => {
  const RouteTemplate = fs.readFileSync(path.resolve(__dirname, './route.template.js')).toString()
  // 由於路由比較特殊。路由模塊須要指定的路徑。因此在這裏從新生成路由文件所須要的參數。
  const _mainPath = folder || moduleName
  const _filePath = folder == '' ? `${moduleName}` : `${folder}/${moduleName}`
  // 進行替換
  let builtTemplate = StringUtil.replaceAll(RouteTemplate, "_mainPath", _mainPath) // 替換模塊主名稱
  builtTemplate = StringUtil.replaceAll(builtTemplate, "_filePath", _filePath) // 替換具體路由路由名稱
  builtTemplate = StringUtil.replaceAll(builtTemplate, "_module", moduleName) // 替換模塊中的name
  return _replaceCommonContent(builtTemplate, comment)
}

/**
 * @author: etongfu
 * @description: 生成API文件
 * @param {string}  comment 註釋
 * @returns:  {*}
 */
module.exports.buildApiFile = comment => {
  const ApiTemplate = fs.readFileSync(path.resolve(__dirname, './api.template.js')).toString()
  return _replaceCommonContent(ApiTemplate, comment)
}

路由注入, 當輸入的目錄已存在的時候就不會新建目錄文件， 這個時候就會把新模塊的路由注入到已存在的目錄的路由文件中，效果以下

![路由注入](./images/inject.png '路由注入')

這裏咱們經過RouteHelper來完成對已存在的路由文件進行新模塊的路由注入操做，主要經過了stream（流）,readline（逐行讀取）來實現的。

接下來是乾貨部分 ==> 首先經過參數找到咱們的目標路由文件，而後經過generateRouter()來拼接生成咱們須要注入的路由。經過injectRoute方法開始注入路由，在injectRoute中咱們首先來生成一個名字爲_root臨時路徑的文件並根據這個路徑建立一個writeStream， 而後根據舊的路由文件地址root建立一個readStream並經過readline讀寫接口去讀取原來的路由文件，用一個數組收集舊的路由每一行的數據。讀取完畢以後開始遍歷temp這個數組並找到第一個children而後把generateRouter()方法返回的數組插入到這個位置。最後使用拼接完成的temp遍歷逐行寫入writeStream中。最後把原來的root文件刪除，把_root重命名爲root。一個路由注入的流程就完了。大致的流程就是這樣， 關於代碼細節不懂得朋友們能夠私信我😁。

/**
 * @author: etongfu
 * @description: 路由注入器
 * @param {string}  dirName
 * @param {string}  moduleName
 * @param {event}  event
 * @returns:  {*}
 */
module.exports.RouteHelper = class {
  constructor (dirName, moduleName, event) {
    // the dir path for router file
    this.dirName = dirName
    // the path for router file
    this.moduleName = moduleName
    // 事件中心
    this.event = event
    // route absolute path
    this.modulePath = path.join(ROOTPATH.routerPath, `${dirName}.js`)
  }
  /**
   * Generate a router for module
   * The vue file path is @/name/name/index
   * The default full url is http:xxxxx/name/name
   * @param {*} routeName url default is router name
   * @param {*string} filePath vue file path default is ${this.dirName}/${this.moduleName}/index
   * @returns {*Array} A string array for write line
   */
  generateRouter (routeName = this.moduleName, filePath = `${this.dirName}/${this.moduleName}/index`) {
    let temp = [
      `      // @Author: ${LOCAL.config.AUTHOR}`,
      `      // @Date: ${DateUtil.getCurrentDate()}`,
      `      {`,
      `        path: "/${this.dirName}/${routeName}",`,
      `        component: () => import("@/views/${filePath}"),`,
      `        name: "${routeName}"`,
      `      },`
    ]
    return temp
  }
  /**
   * add router to file
   */
  injectRoute () {
    try {
      const root = this.modulePath
      const _root = path.join(ROOTPATH.routerPath, `_${this.dirName}.js`)
      // temp file content
      let temp = []
      // file read or write
      let readStream = fs.createReadStream(root)
      // temp file
      let writeStream = fs.createWriteStream(_root)
      let readInterface = readline.createInterface(
        {
          input: readStream
        // output: writeStream
        }
      )
      // collect old data in file
      readInterface.on('line', (line) => {
        temp.push(line)
      })
      // After read file and we begin write new router to this file
      readInterface.on('close', async () => {
        let _index
        temp.forEach((line, index) => {
          if (line.indexOf('children') !== -1) {
            _index = index + 1
          }
        })
        temp = temp.slice(0, _index).concat(this.generateRouter(), temp.slice(_index))
        // write file
        temp.forEach((el, index) => {
          writeStream.write(el + os.EOL)
        })
        writeStream.end('\n')
        // 流文件讀寫完畢
        writeStream.on('finish', () => {
          fs.unlinkSync(root)
          fs.renameSync(_root, root)
          Log.success(`路由/${this.dirName}/${this.moduleName}注入成功`)
          //emit 成功事件
          this.event.emit('success', true)
        })
      })
    } catch (error) {
      Log.error('路由注入失敗')
      Log.error(error)
    }
  }
}

關於路由注入這一塊我本身這麼設計其實並非很滿意，有更好的方法還請大佬告知一下。

  • .env.local: 配置文件， 這個是第一次使用腳本的時候生成的。沒啥特別的，就是記錄本地配置項。
AUTHOR = etongfu
Email = 13583254085@163.com
  • util.js: 各類工具方法，包含了date, file, fs, string, Log, ROOTPATH等等工具方法, 篇幅有限我就貼出來部分代碼， 你們能夠在項目中查看所有代碼
const chalk = require('chalk')
const path = require('path')
const dotenv = require('dotenv')
const fs = require('fs')
// 本地配置相關
module.exports.LOCAL = class  {
  /**
   * env path
   */
  static get envPath () {
    return path.resolve(__dirname, './.env.local')
  }
  /**
   * 配置文件
   */
  static get config () {
    // ENV 文件查找優先查找./env.local
    const ENV = fs.readFileSync(path.resolve(__dirname, './.env.local')) || fs.readFileSync(path.resolve(__dirname, '../.env.development.local'))
    // 轉爲config
    const envConfig = dotenv.parse(ENV)
    return envConfig
  }
  /**
   * 建立.env配置文件文件
   * @param {*} config 
   * @description 建立的env文件會保存在scripts文件夾中
   */
  static buildEnvFile (config = {AUTHOR: ''}) {
    if (!fs.existsSync(this.envPath)) {
      // create a open file
      fs.openSync(this.envPath, 'w')
    }
    let content = ''
    // 判斷配置文件是否合法
    if (Object.keys(config).length > 0) {
      // 拼接內容
      for (const key in config) {
        let temp = `${key} = ${config[key]}\n`
        content += temp
      }
    }
    // write content to file
    fs.writeFileSync(this.envPath, content, 'utf8')
    Log.success(`local env file ${this.envPath} create success`)
  }
  /**
   * 檢測env.loacl文件是否存在
   */
  static hasEnvFile () {
    return fs.existsSync(path.resolve(__dirname, './.env.local')) || fs.existsSync(path.resolve(__dirname, '../.env.development.local'))
  }
}

// 日誌幫助文件
class Log {
  // TODO
}
module.exports.Log = Log

// 字符串Util
module.exports.StringUtil = class {
    // TODO
}
// 文件操做Util
module.exports.FileUtil = class {
  // TODO
  /**
   * If module is Empty then create dir and file
   * @param {*} filePath .vue/.js 文件路徑
   * @param {*} content 內容
   * @param {*} dirPath 文件夾目錄
   */
  static createDirAndFile (filePath, content, dirPath = '') {
    try {
      // create dic if file not exit
      if (dirPath !== '' && ! fs.existsSync(dirPath)) {
        // mkdir new dolder
        fs.mkdirSync(dirPath)
        Log.success(`created ${dirPath}`)
      }
      if (!fs.existsSync(filePath)) {
        // create a open file
        fs.openSync(filePath, 'w')
        Log.success(`created ${filePath}`)
      }
      // write content to file
      fs.writeFileSync(filePath, content, 'utf8')
    } catch (error) {
      Log.error(error)
    }
  }
}
// 日期操做Util
module.exports.DateUtil = class {
  // TODO
}

在Util文件中須要注意的部分多是.env文件的生成和讀取這一部分和FileUtil中createDirAndFile, 這個是咱們用來生成文件夾和文件的方法，所有使用node文件系統完成。熟悉了API以後不會有難度。

Util文件中有一個ROOTPATH要注意一下指的是咱們的路由，views, api的根目錄配置, 這個配置的話我建議不要寫死， 由於若是你的項目有多入口或者是子項目,這些可能都會變。你也能夠選擇其餘的方式進行配置。

// root path
const reslove = (file = '.') => path.resolve(__dirname, '../src', file)
const ROOTPATH = Object.freeze({
  srcPath: reslove(),
  routerPath: reslove('router/modules'),
  apiPath: reslove('api'),
  viewsPath: reslove('views')
})
module.exports.ROOTPATH = ROOTPATH
  • 預覽

這樣的話咱們就能愉快的經過命令行快速的建立模塊了, 效果以下

![建立成功](./images/build.png '建立成功')

運行

![運行](./images/run.png '運行')

  • 總結

雖然這些事兒複製粘貼也能完成，可是經過機器完成可靠度和可信度都會提高很多。咱們的前端團隊目前已經全面使用腳原本建立新模塊，而且腳本在不斷升級中。親測在一個大項目中這樣一個腳本爲團隊節約的時間是很是可觀的， 建議你們有時間也能夠寫一寫這種腳本爲團隊或者本身節約下寶貴的時間😁

完成機械任務

在開發過程當中，有不少工做都是機械且無趣的。不拿這些東西開刀簡直對不起他們

SSH發佈

注： 若是團隊部署了CI/CD，這個部分能夠直接忽略。

通過個人觀察，不少前端程序員並不懂Linux操做， 有的時候發佈測試還須要去找同事幫忙，若是另外一個同事Linux功底也不是很好的話，那就可能浪費兩我的的很大一起時間。今天經過寫一個腳本讓咱們的全部同事都能獨立的發佈測試。這個文件一樣放在項目的scripts文件夾下

前期準備

開始擼

由於是發佈到不一樣的服務器， 由於development/stage/production應該都是不一樣的服務器，因此咱們須要一個配置文件來管理服務器。
deploy.config.js

module.exports = Object.freeze({
  // development
  development: {
    SERVER_PATH: "xxx.xxx.xxx.xx", // ssh地址
    SSH_USER: "root", // ssh 用戶名
    SSH_KEY: "xxx", // ssh 密碼 / private key文件地址
    PATH: '/usr/local' // 操做開始文件夾 能夠直接指向配置好的地址
  },
  // stage
  stage: {
    SERVER_PATH: "",
    SSH_USER: "",
    SSH_KEY: "",
    PATH: ''
  },
  // production
  production: {
    SERVER_PATH: "",
    SSH_USER: "",
    SSH_KEY: "",
    PATH: ''
  }
})

配置文件配置好了下面開始寫腳本， 咱們先肯定下來流程

  1. 經過inquirer問問題，這是個示例代碼， 問題就比較簡單了， 在真正使用中包括了發佈平臺等等不一樣的發佈目標。
  2. 檢查配置文件， 由於配置文件準確是必須的
  3. 壓縮dist文件，經過zip-local去操做。很簡單
  4. 經過node-ssh鏈接上服務器
  5. 執行刪除和備份（備份還沒寫）服務器上老的文件。
  6. 調用SSH的putFile方法開始把本地文件上傳到服務器。
  7. 對服務器執行unzip命令。

8: 發佈完成🎈

下面是乾貨代碼

第一部分 實際操做部分， 連接SSH, 壓縮文件等等

const fs = require('fs')
const path = require('path')
const ora = require('ora')
const zipper = require('zip-local')
const shell = require('shelljs')
const chalk = require('chalk')
const CONFIG = require('../config/release.confg')
let config
const inquirer = require('inquirer')
const node_ssh = require('node-ssh')
let SSH = new node_ssh()
// loggs
const errorLog = error => console.log(chalk.red(`*********${error}*********`))
const defaultLog = log => console.log(chalk.blue(`*********${log}*********`))
const successLog = log => console.log(chalk.green(`*********${log}*********`))
// 文件夾位置
const distDir = path.resolve(__dirname, '../dist')
const distZipPath = path.resolve(__dirname, '../dist.zip')
// ********* TODO 打包代碼 暫時不用 須要和打包接通以後進行測試 *********
const compileDist = async () => {
  // 進入本地文件夾
  shell.cd(path.resolve(__dirname, '../'))
  shell.exec(`npm run build`)
  successLog('編譯完成')
}
// ********* 壓縮dist 文件夾 *********
const zipDist =  async () => {
  try {
    if(fs.existsSync(distZipPath)) {
      defaultLog('dist.zip已經存在, 即將刪除壓縮包')
      fs.unlinkSync(distZipPath)
    } else {
      defaultLog('即將開始壓縮zip文件')
    }
    await zipper.sync.zip(distDir).compress().save(distZipPath);
    successLog('文件夾壓縮成功')
  } catch (error) {
    errorLog(error)
    errorLog('壓縮dist文件夾失敗')
  }
}
// ********* 鏈接ssh *********
const connectSSh = async () =>{
  defaultLog(`嘗試鏈接服務： ${config.SERVER_PATH}`)
  let spinner = ora('正在鏈接')
  spinner.start()
  try {
    await SSH.connect({
      host: config.SERVER_PATH,
      username: config.SSH_USER,
      password: config.SSH_KEY
    })
    spinner.stop()
    successLog('SSH 鏈接成功')
  } catch (error) {
    errorLog(err)
    errorLog('SSH 鏈接失敗');
  }
}
// ********* 執行清空線上文件夾指令 *********
const runCommond = async (commond) => {
  const result = await SSH.exec(commond,[], {cwd: config.PATH})
  defaultLog(result)
}
const commonds = [`ls`, `rm -rf *`]
// ********* 執行清空線上文件夾指令 *********
const runBeforeCommand = async () =>{
  for (let i = 0; i < commonds.length; i++) {
    await runCommond(commonds[i])
  }
}
// ********* 經過ssh 上傳文件到服務器 *********
const uploadZipBySSH = async () => {
  // 鏈接ssh
  await connectSSh()
  // 執行前置命令行
  await runBeforeCommand()
  // 上傳文件
  let spinner = ora('準備上傳文件').start()
  try {
    await SSH.putFile(distZipPath, config.PATH + '/dist.zip')
    successLog('完成上傳')
    spinner.text = "完成上傳, 開始解壓"
    await runCommond('unzip ./dist.zip')
  } catch (error) {
    errorLog(error)
    errorLog('上傳失敗')
  }
  spinner.stop()
}

第二部分 命令行交互和配置校驗

// ********* 發佈程序 *********
/**
 * 經過配置文件檢查必要部分
 * @param {*dev/prod} env 
 * @param {*} config 
 */
const checkByConfig = (env, config = {}) => {
  const errors = new Map([
    ['SERVER_PATH',  () => {
      // 預留其餘校驗
      return config.SERVER_PATH == '' ? false : true
    }],
    ['SSH_USER',  () => {
      // 預留其餘校驗
      return config.SSH_USER == '' ? false : true
    }],
    ['SSH_KEY',  () => {
      // 預留其餘校驗
      return config.SSH_KEY == '' ? false : true
    }]
  ])
  if (Object.keys(config).length === 0) {
    errorLog('配置文件爲空， 請檢查配置文件')
    process.exit(0)
  } else {
    Object.keys(config).forEach((key) => {
      let result = errors.get(key) ? errors.get(key)() : true
      if (!result) {
        errorLog(`配置文件中配置項${key}設置異常，請檢查配置文件`)
        process.exit(0)
      }
    })
  }
  
}
// ********* 發佈程序 *********
const runTask = async () => {
  // await compileDist()
  await zipDist()
  await uploadZipBySSH()
  successLog('發佈完成!')
  SSH.dispose()
  // exit process
  process.exit(1)
}
// ********* 執行交互 *********
inquirer.prompt([
  {
    type: 'list',
    message: '請選擇發佈環境',
    name: 'env',
    choices: [
      {
        name: '測試環境',
        value: 'development'
      },
      {
        name: 'stage正式環境',
        value: 'production'
      },
      {
        name: '正式環境',
        value: 'production'
      }
    ]
  }
]).then(answers => {
  config = CONFIG[answers.env]
  // 檢查配置文件
  checkByConfig(answers.env, config)
  runTask()
})

效果預覽

![發佈](./images/deploy.png '發佈')

至此你們就能夠愉快的發佈代碼了， 無痛發佈。親測一次耗時不會超過30s

打包後鉤子

這個打算專門寫一篇文章。由於這篇文章有點長了。。。

總結

這些腳本寫的時候可能須要一點時間， 可是一旦完成以後就會爲團隊在效率和質量上有大幅度的提高，讓開發人員更見專一與業務和技術。同時時間成本的節約也是不可忽視的，這是我在團隊試驗以後得出的結論。 之前開發一個模塊前期的複製粘貼準備等等可能須要半個小時還要多點， 如今一個模塊前期準備加上一個列表頁靜態開發10分鐘搞定。寫了發佈腳本以後直接就讓每個同事可以獨立發佈測試環境（正式權限不是每一個人都有），而且耗時極短。這些都是實在的體如今平常開發中了。另外Node環境都安裝了，不用白不用（白嫖😁😁😁）， 各位大佬也能夠本身發散思惟，能讓代碼搬的磚就不要本身搬。

示例代碼

原文地址 若是以爲有用得話給個⭐吧

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程