有过 web 开发经历的小伙伴大概对配置文件是深恶痛绝的——实在是太多了，最常见的就有 babel、eslint、tsconfig、webpack，package.json 等等；而且各种配置使用不同的文件扩展，使用时还要安装各种插件，繁琐且无聊。几年前，主流框架开始尝试提供无脑启动的脚手架，如create-react-app、vue create等等，其中有些小众框架甚至主打了零配置招牌。这期就介绍一款完全零配置的 Web 框架——zero server。
概述
所谓零配置，就是不需要手写任何配置文件，只要把代码放在工作空间，直接一行命令，安装、编译、打包、启动等等全套服务一气呵成。Zero Server 就是基于这种愿景设计的一款 web 框架，它的主要特色有：
- 零依赖配置管理
- 基于文件路径的 API 路由
- 支持动态路由
- 支持服务端渲染（SSR）和静态页面生成（SSG）
- 支持主流的框架和语言，包括 React、Vue、Node、Python、Markdown 等等
Get Started
OK，略过似懂非懂的概述，我们先回到一切的开始——安装。使用该框架前，需要全局安装 zero：
npm i -g zero
安装结束后，为 Zero 应用创建一个根目录：
mkdir zero-app
接着在 zero-app 目录下新建一个 index.jsx 文件：我们先以一个简单的 React 应用为例，写一个 Hello World 的函数组件：
export default () => <h1>Hello World</h1>;
zero-app
运行 zero
cd zero-app
zero
看效果如下，配置（.babelrc、.gitignore）和依赖相关的文件（package.json、node_module、yarn.lock）都自动生成了：
run zero
顺道，zero 还帮我们启动了服务；浏览器输入 localhost:3000，便可看到 index.jsx 的实现了：
index
有了 React，我们再试试 Vue；在根目录新建 about.vue 如下：
<template>
<h2>{{ message }}</h2>
</template>
<script>
module.exports = {
data() {
return {
message: "About Vue",
};
},
};
</script>
Zero 能识别所有主流框架的扩展名，并处理好相关依赖，最后热启动服务——一条龙服务省心省力。我们转到 localhost:3000/about 看一下效果：
about
有兴趣的小伙伴还可以试试 markdown、python、html 等等文件。
路由
从上文中大家不难发现 zero 框架中文件和路由的关系大致如下：
| file | route |
|---|---|
| index.jsx | localhost:3000 |
| about.vue | localhost:3000/about |
| markdown.md | localhost:3000/markdown |
Zero 应用就是基于文件目录的路由系统：
- 在开发环境下，只要在特定目录下新建相关文件，zero 会根据路劲+文件名（不包括扩展名）自动建立对应路由（由于加载依赖，速度上有点慢）
- 生成环境需要提前 build 一下（
zero build），接着 zero 便会在.zero目录下生成特定的静态资源，并根据文件目录建立路由表
route
API 路由
书接上文，zero 除了支持编译静态资源，还支持动态 API，默认框架是 express.js。我们新建 node 文件 /api/hello.js，并返回一个 message 对象：
export default (req, res) => {
res.send({ message: "Hello from API." });
};
API 依旧是基于路劲的路由，我们打开localhost:3000/api/hello，可以看到返回的数据：
API
接着再看一下如何调用这些 API。上文提到 Zero 支持服务端渲染（SSR），我们还是以 React 为例看一下使用方法。Zero 原生支持了 React SSR 框架 next.js；它提供了一个 getInitialProps 的方法获取 API 数据，并在服务端渲染后返回页面资源。我们新建一个 hello.jsx 文件使用后端渲染技术：
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>;
}
}
看看服务端调用 API 的效果：
Hello From API
动态路由
除此之外，Zero 还提供了动态路由机制；当然还是基于文件系统的路径，只是动态动态路由表对应的是 $ 符开头的文件。举个例子，新建一个 react 页面——/user/$name.jsx；再次利用 next.js 的getInitialProps 获取 url 的参数 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 就是动态填充的 $name，看效果：
User name
Vue、Svelte、Python 等等框架有它们自己的 SSR 方法，有兴趣的小伙伴可以在这里查看具体使用。
小结
Zero 是一个比较有趣的 Web 框架，从案例来看几乎实现了所有的零配置需求。但是，现实中，我猜，几乎不会有技术负责人把它放到生产线上去。零配置 Web 框架还是出生得太早了，生产环境中大概率就是一个无底黑洞。
不过，写写 demo，快速搭建一个本地服务，Zero 还是一个很完美的选择。当然，也希望有朝一日，能真正出现一种优雅的框架解决现阶段繁琐的配置；不过，那时候可能前端开发人员也不值钱了吧。哈哈，让我们拭目以待吧。
文章同步发布于an-Onion 的 Github。码字不易，欢迎点赞。
网友评论