我猜你需要一個像vue-cli一樣的後端(node)腳手架

ni742017發表於2019-03-24
Vue後端

前言

相信大家在開發前端的專案時都嘗試使用vue-cil之類的腳手架工具來初始化專案，通過這類工具我們可以快速的得到一個包含webpack、babel和基本框架程式碼的專案模板極大地提升了開發效率也降低了上手的難度。

受到這類框架的啟發（主要是Next.js）我嘗試建立了一個基於koa2+mongoose的後端腳手架工具 Bus（來不及解釋了快上車），主要包含以下功能：

  1. 提供cil命令用於初始化專案，執行、打包專案
  2. 包含webpack、babel環境配置支援自定義
  3. 自動根據介面生成swagger文件
  4. 基礎邏輯分裝在框架庫內，開發者只需關注業務邏輯
  5. 提供通用的介面繼承（包括get,post,put,delete等通用介面，避免重複勞動）

食用方法

安裝方式:

npm install -g bus-core
bus init
// or
npx bus-core init

複製程式碼

初始化專案:

cd yourproject
npm install
複製程式碼

修改配置檔案 路徑:src/config/index.js 參考以下配置:

{
    port: 3000,
    mongodb: {
        url: 'mongodb://test:test@mongoBaseUrl/test'
    }
}
複製程式碼

執行 npm run dev 成功後開啟 http://localhost:3000/api/swagger-html

我猜你需要一個像vue-cli一樣的後端(node)腳手架

ok，專案初始化就完成了（可以看到雖然我們只宣告瞭3個api介面但是卻多了好幾個，這些其實都是從commonapi繼承過來的）

目錄結構

  • src
    • apis （介面檔案）
    • models （mongoose model擴充）
    • schemas （資料表結構）
    • index.js （入口檔案）
  • bus.config.js （webpack配置）
  • .babelrc （babel配置）
  • .eslintrc.js （eslint設定）
  • .editorconfig （編輯器設定）

環境設定

webpack設定

你可以通過在bus.config.js中定義一個webpack方法來擴充webpack的設定

// bus.config.js
module.exports = {
	webpack(config) {
		let loaders = config.module.rules
		loaders.push(	{
			test: /\.html$/,
			loader: 'raw-loader'
		})

		return config
	}
}
複製程式碼

babel設定

你可以建立一個在專案根目錄建立一個.babelrc檔案來擴充babel的設定。注意將bus-core/babel加到presets中

參考以下示例:

{
    "presets" : ["bus-core/babel"],
    "env": {
        "production": {
          "plugins": [
            ["transform-remove-console", { "exclude": [ "error", "warn", "info"] }]
          ]
    }
  }
}
複製程式碼

CLI 命令

bus init

生成一個專案 (現在只提供base模板)

我猜你需要一個像vue-cli一樣的後端(node)腳手架

bus dev

開發環境執行.

當你修改程式碼時會自動過載，程式碼錯誤會如下顯示.

我猜你需要一個像vue-cli一樣的後端(node)腳手架

bus build

將以生產模式優化構建以獲得最佳效能，構建後的程式碼將輸出在 build 目錄下.

你可以通過以下命令執行構建後的程式碼:

node ./build/main.js
複製程式碼

你的應用已經可以釋出了!

結語

本文只是對Bus框架的簡要說明，如果你想更深入的瞭解請移步github（點這裡）。

之後計劃會推出關聯式資料庫版（基於sequelize），如果大家覺得還不錯的話請順手star一下~

相關文章