有過(guò) web 開發(fā)經(jīng)歷的小伙伴大概對(duì)配置文件是深惡痛絕的——實(shí)在是太多了，最常見(jiàn)的就有 babel、eslint、tsconfig瘟芝、webpack，package.json 等等润歉；而且各種配置使用不同的文件擴(kuò)展，使用時(shí)還要安裝各種插件颈抚，繁瑣且無(wú)聊踩衩。幾年前，主流框架開始嘗試提供無(wú)腦啟動(dòng)的腳手架贩汉，如create-react-app驱富、vue create等等，其中有些小眾框架甚至主打了零配置招牌匹舞。這期就介紹一款完全零配置的 Web 框架——zero server褐鸥。
概述
所謂零配置，就是不需要手寫任何配置文件赐稽，只要把代碼放在工作空間叫榕，直接一行命令浑侥，安裝、編譯晰绎、打包寓落、啟動(dòng)等等全套服務(wù)一氣呵成。Zero Server 就是基于這種愿景設(shè)計(jì)的一款 web 框架荞下，它的主要特色有：
- 零依賴配置管理
- 基于文件路徑的 API 路由
- 支持動(dòng)態(tài)路由
- 支持服務(wù)端渲染（SSR）和靜態(tài)頁(yè)面生成（SSG）
- 支持主流的框架和語(yǔ)言伶选，包括 React、Vue尖昏、Node仰税、Python、Markdown 等等
Get Started
OK抽诉，略過(guò)似懂非懂的概述陨簇，我們先回到一切的開始——安裝。使用該框架前掸鹅，需要全局安裝 zero：
npm i -g zero
安裝結(jié)束后塞帐，為 Zero 應(yīng)用創(chuàng)建一個(gè)根目錄：
mkdir zero-app
接著在 zero-app 目錄下新建一個(gè) index.jsx 文件：我們先以一個(gè)簡(jiǎn)單的 React 應(yīng)用為例，寫一個(gè) Hello World 的函數(shù)組件：
export default () => <h1>Hello World</h1>;
運(yùn)行 zero
cd zero-app
zero
看效果如下巍沙，配置（.babelrc葵姥、.gitignore）和依賴相關(guān)的文件（package.json、node_module句携、yarn.lock）都自動(dòng)生成了：
順道榔幸，zero 還幫我們啟動(dòng)了服務(wù)；瀏覽器輸入 localhost:3000矮嫉，便可看到 index.jsx 的實(shí)現(xiàn)了：
有了 React削咆，我們?cè)僭囋?Vue；在根目錄新建 about.vue 如下：
<template>
<h2>{{ message }}</h2>
</template>
<script>
module.exports = {
data() {
return {
message: "About Vue",
};
},
};
</script>
Zero 能識(shí)別所有主流框架的擴(kuò)展名蠢笋，并處理好相關(guān)依賴拨齐，最后熱啟動(dòng)服務(wù)——一條龍服務(wù)省心省力。我們轉(zhuǎn)到 localhost:3000/about 看一下效果：
有興趣的小伙伴還可以試試 markdown昨寞、python瞻惋、html 等等文件。
路由
從上文中大家不難發(fā)現(xiàn) zero 框架中文件和路由的關(guān)系大致如下：
| file | route |
|---|---|
| index.jsx | localhost:3000 |
| about.vue | localhost:3000/about |
| markdown.md | localhost:3000/markdown |
Zero 應(yīng)用就是基于文件目錄的路由系統(tǒng)：
- 在開發(fā)環(huán)境下援岩，只要在特定目錄下新建相關(guān)文件歼狼，zero 會(huì)根據(jù)路勁+文件名（不包括擴(kuò)展名）自動(dòng)建立對(duì)應(yīng)路由（由于加載依賴，速度上有點(diǎn)慢）
- 生成環(huán)境需要提前 build 一下（
zero build）享怀，接著 zero 便會(huì)在.zero目錄下生成特定的靜態(tài)資源羽峰，并根據(jù)文件目錄建立路由表
API 路由
書接上文，zero 除了支持編譯靜態(tài)資源，還支持動(dòng)態(tài) API梅屉，默認(rèn)框架是 express.js值纱。我們新建 node 文件 /api/hello.js，并返回一個(gè) message 對(duì)象：
export default (req, res) => {
res.send({ message: "Hello from API." });
};
API 依舊是基于路勁的路由履植，我們打開localhost:3000/api/hello计雌，可以看到返回的數(shù)據(jù)：
接著再看一下如何調(diào)用這些 API。上文提到 Zero 支持服務(wù)端渲染（SSR）玫霎，我們還是以 React 為例看一下使用方法凿滤。Zero 原生支持了 React SSR 框架 next.js；它提供了一個(gè) getInitialProps 的方法獲取 API 數(shù)據(jù)庶近，并在服務(wù)端渲染后返回頁(yè)面資源翁脆。我們新建一個(gè) hello.jsx 文件使用后端渲染技術(shù)：
import React from "react";
export default class extends React.Component {
static async getInitialProps() {
return fetch("/api/hello")
.then((res) => res.json())
.then((json) => ({ message: json.message }));
}
render() {
return <p>Message from API: {this.props.message}</p>;
}
}
看看服務(wù)端調(diào)用 API 的效果：
動(dòng)態(tài)路由
除此之外，Zero 還提供了動(dòng)態(tài)路由機(jī)制鼻种；當(dāng)然還是基于文件系統(tǒng)的路徑反番，只是動(dòng)態(tài)動(dòng)態(tài)路由表對(duì)應(yīng)的是 $ 符開頭的文件。舉個(gè)例子叉钥，新建一個(gè) react 頁(yè)面——/user/$name.jsx罢缸；再次利用 next.js 的getInitialProps 獲取 url 的參數(shù) name：
import React from "react";
export default class extends React.Component {
static async getInitialProps({ url }) {
const { params } = url;
return { name: params.name };
}
render() {
return <div>Your user name: {this.props.name}</div>;
}
}
輸入 localhost:3000/user/Onion；這里 Onion 就是動(dòng)態(tài)填充的 $name投队，看效果：
Vue枫疆、Svelte、Python 等等框架有它們自己的 SSR 方法敷鸦，有興趣的小伙伴可以在這里查看具體使用息楔。
小結(jié)
Zero 是一個(gè)比較有趣的 Web 框架，從案例來(lái)看幾乎實(shí)現(xiàn)了所有的零配置需求扒披。但是值依，現(xiàn)實(shí)中，我猜碟案，幾乎不會(huì)有技術(shù)負(fù)責(zé)人把它放到生產(chǎn)線上去愿险。零配置 Web 框架還是出生得太早了，生產(chǎn)環(huán)境中大概率就是一個(gè)無(wú)底黑洞价说。
不過(guò)辆亏，寫寫 demo，快速搭建一個(gè)本地服務(wù)熔任，Zero 還是一個(gè)很完美的選擇褒链。當(dāng)然唁情，也希望有朝一日疑苔，能真正出現(xiàn)一種優(yōu)雅的框架解決現(xiàn)階段繁瑣的配置；不過(guò)甸鸟，那時(shí)候可能前端開發(fā)人員也不值錢了吧惦费。哈哈兵迅，讓我們拭目以待吧。
文章同步發(fā)布于an-Onion 的 Github薪贫。碼字不易恍箭，歡迎點(diǎn)贊。
