名字就看著很有趣。

所謂Zero的意思是零配置、零煩惱，就是說直接寫業務代碼即可，其他的事情都交給Zero來搞定。它的官網地址是Zero Server。

Hello World

依照慣例，總是先看Hello World。

npm install -g zero

這個框架需要全局安裝。

新建一個文件夾，然後在裡面新建一個time.js文件，輸入

// time.js
const moment = require("moment");

module.exports = (req, res) => {
var time = moment().format("LT");
res.send({ time: time });
};

注意此時什麼依賴都沒有安裝，moment這個包在當前路徑下不存在，並且甚至於package.json文件都沒有建出來(當然在執行zero命令後，這個文件還是會被它新建的)。

在文件夾下執行命令zero，它都一條龍幫你搞定。

打開localhost:3000/time，可以看到當前時間的JSON字元串，注意路由/time就是和文件名time.js相對應的。

更為可怕的還在後面，zero還能支持如下內容

  • Node.js (JavaScript & TypeScript)
  • React (JavaScript & TypeScript)
  • HTML
  • Markdown / MDX
  • Vue
  • Python

不用重啟zero，新建一個index.jsx文件，輸入

// index.jsx
import React from "react";

export default class extends React.Component {
static async getInitialProps() {
var json = await fetch("/time").then(resp => resp.json());
return { time: json.time };
}

render() {
return <p>Current time is: {this.props.time}</p>;
}
}

打開http://localhost:3000/，直接看到頁面內容

也就是說，你可以在一個工程裏任意寫React，Vue，Python等，6得飛起。

特點

自動配置：這個剛才已經見過了，什麼配置文件和配置屬性都沒加入。

基於文件的路由：這個有點像next.js之類的SSR框架的行為，把文件路徑和路由對應，/api/login就對應到文件系統裏的./api/login.js(或者其他格式，比如jsx、vue)。

自動處理依賴：我們不需要自己先去安裝依賴，可以直接引入。聖鬥士年代，大喊名稱再放招式的時代一去不復返了。不過zero默認只會安裝最新版本，要定製版本還是需要自己去package.json裏修改。

支持多種語言(框架)：剛才已經列舉了。

改進的錯誤處理：每個路由入口都是獨立的，處在自己的進程裏，/api/login的崩潰不會影響到/api/chat。崩潰後下次用戶訪問時會自動重啟。

路由重寫機制

這一點可能在實際開發中造成一些錯誤理解或出乎意料的bug。在zero裏，如果一個路由對應的文件找不到，那它會向上找最接近的父文件。

比如訪問/user/luke，但是在文件系統裏找不到./user/luke.js或者相關的文件，那麼zero會去找./user.js同時把luke視作傳給/user的一個參數。而訪問/user/luke/messages時，/user的req.params就等於[luke, message]。

這個還是好理解的，就類似於/user/:name這種路由形式。

.zeroignore配置

類似於.gitignore文件，這個文件裏的內容不會被zero當成服務內容暴露出來。比如文件系統裏有個components文件裡面是基礎組件，那麼就要把components配置到.zeroignore裏。

埠修改

修改環境變數PORT即可。

本來還想做個例子的，不過這張官網的動圖足以體現zero的有趣了

剛才又看了下React和Vue的用法，感覺真的跟同構框架很像，它們分別有方法static async getInitialProps和asyncData: async function({ req, url, user })可以用來在渲染前獲取到數據，而不是全部留給瀏覽器來執行渲染。

推薦閱讀：

相關文章