现代配置指南——YAML 比 JSON 高级在哪？

原文链接：https://segmentfault.com/a/1190000041108051

一直以来，前端工程中的配置大多都是 .js 文件或者 .json 文件，最常见的比如：

package.json
babel.config.js
webpack.config.js

这些配置对前端非常友好，因为都是我们熟悉的 JS 对象结构。一般静态化的配置会选择 json 文件，而动态化的配置，涉及到引入其他模块，因此会选择 js 文件。

还有现在许多新工具同时支持多种配置，比如 Eslint，两种格式的配置任你选择：

.eslintrc.json
.eslintrc.js

后来不知道什么时候，突然出现了一种以 .yaml 或 .yml 为后缀的配置文件。一开始以为是某个程序的专有配置，后来发现这个后缀的文件出现的频率越来越高，甚至 Eslint 也支持了第三种格式的配置 .eslintrc.yml。

既然遇到了，那就探索它！

下面我们从 YAML 的出现背景，使用场景，具体用法，高级操作四个方面，看一下这个流行的现代化配置的神秘之处。

出现背景

一个新工具的出现避免不了有两个原因：

旧工具在某些场景表现吃力，需要更优的替代方案
旧工具也没什么不好，只是新工具出现，比较而言显得它不太好

YAML 这种新工具就属于后者。其实在 yaml 出现之前 js+json 用的也不错，也没什么特别难以处理的问题；但是 yaml 出现以后，开始觉得它好乱呀什么东西，后来了解它后，越用越喜欢，一个字就是优雅。

很多文章说选择 yaml 是因为 json 的各种问题，json 不适合做配置文件，这我觉得有些言过其实了。我更愿意将 yaml 看做是 json 的升级，因为 yaml 在格式简化和体验上表现确实不错，这个得承认。

下面我们对比 YAML 和 JSON，从两方面分析：

精简了什么？

JSON 比较繁琐的地方是它严格的格式要求。比如这个对象：

{
  name: 'ruims'
}

在 JSON 中以下写法通通都是错的：

// key 没引号不行
{
  name: 'ruims'
}
// key 不是 "" 号不行
{
  'name': 'ruims'
}
// value 不是 "" 号不行
{
  "name": 'ruims'
}

字符串的值必须 k->v 都是 "" 才行：

// 只能这样
{
  "name": "ruims"
}

虽然是统一格式，但是使用上确实有不便利的地方。比如我在浏览器上测出了接口错误。然后把参数拷贝到 Postman 里调试，这时就我要手动给每个属性和值加 “” 号，非常繁琐。

YAML 则是另辟蹊径，直接把字符串符号干掉了。上面对象的同等 yaml 配置如下：

name: ruims

没错，就这么简单！

除了 "" 号，yaml 觉得 {} 和 [] 这种符号也是多余的，不如一起干掉。

于是呢，以这个对象数组为例：

{
  "names": [{ "name": "ruims" }, { "name": "ruidoc" }]
}

转换成 yaml 是这样的：

names:
  - name: ruims
  - name: ruidoc

对比一下这个精简程度，有什么理由不爱它？

增加了什么？

说起增加的部分，最值得一提的，是 YAML 支持了 注释。

用 JSON 写配置是不能有注释的，这就意味着我们的配置不会有备注，配置多了会非常凌乱，这是最不人性化的地方。

现在 yaml 支持了备注，以后配置可以是这样的：

# 应用名称
name: my_app
# 应用端口
port: 8080

把这种配置丢给新同事，还怕他看不懂配了啥吗？

除注释外，还支持配置复用的相关功能，这个后面说。

使用场景

我接触的第一个 yaml 配置是 Flutter 项目的包管理文件 pubspec.yaml，这个文件的作用和前端项目中的 package.json 一样，用于存放一些全局配置和应用依赖的包和版本。

看一下它的基本结构：

name: flutter_demo
description: A new Flutter project.

publish_to: 'none'
version: 1.0.0

dependencies:
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_lints: ^1.0.0

你看这个结构和 package.json 是不是基本一致？dependencies 下列出应用依赖和版本，dev_dependencies 下的则是开发依赖。

后来在做 CI/CD 自动化部署的时候，我们用到了 GitHub Action。它需要多个 yaml 文件来定义不同的工作流，这个配置可比 flutter 复杂的多。

其实不光 GitHub Action，其他流行的类似的构建工具如 GitLab CI/CD，circleci，全部都是齐刷刷的 yaml 配置，因此如果你的项目要做 CI/CD 持续集成，不懂 yaml 语法肯定是不行的。

还有，接触过 Docker 的同学肯定知道 Docker Compose，它是 Docker 官方的单机编排工具，其配置文件 docker-compose.yml 也是妥妥的 yaml 格式。现在 Docker 正是如日中天的时候，使用 Docker 必然免不了编排，因此 yaml 语法早晚也要攻克。

上面说的这 3 个案例，几乎都是现代最新最流行的框架/工具。从它们身上可以看出来，yaml 必然是下一代配置文件的标准，并且是前端-后端-运维的通用标准。

说了这么多，你跃跃欲试了吗？下面我们详细介绍 yaml 语法。

YAML 语法

介绍 yaml 语法会对比 json 解释，以便我们快速理解。

先看一下 yaml 的几个特点：

大小写敏感
使用缩进表示层级关系
缩进空格数不强制，但相同层级要对齐
# 表示注释

相比于 JSON 来说，最大的区别是用 缩进 来表示层级，这个和 Python 非常接近。还有强化的一点是支持了注释，JSON 默认是不支持的（虽然 TS 支持），这也对配置文件非常重要。

YAML 支持以下几种数据结构：

对象：json 中的对象
数组：json 中的数组
纯量：json 中的简单类型（字符串，数值，布尔等）

对象

先看对象，上一个 json 例子：

{
  "id": 1,
  "name": "杨成功",
  "isman": true
}

转换成 yaml：

id: 1
name: 杨成功
isman: true

对象是最核心的结构，key 值的表示方法是 [key]: ，注意这里冒号后面有个空格，一定不能少。value 的值就是一个纯量，且默认不需要引号。

数组

数组和对象的结构差不多，区别是在 key 前用一个 - 符号标识这个是数组项。注意这里也有一个空格，同样也不能少。

- hello
- world

转换成 JSON 格式如下：

["hello", "world"]

了解了基本的对象和数组，我们再来看一个复杂的结构。

众所周知，在实际项目配置中很少有简单的对象或数组，大多都是对象和数组相互嵌套而成。在 js 中我们称之为对象数组，而在 yaml 中我们叫 复合结构。

比如这样一个稍复杂的 JSON：

{
  "name": "杨成功",
  "isman": true,
  "age": 25,
  "tag": ["阳光", "帅气"],
  "address": [
    { "c": "北京", "a": "海淀区" },
    { "c": "天津", "a": "滨海新区" }
  ]
}

转换成复合结构的 YAML：

name: 杨成功
isman: true
age: 25
tag:
  - 阳光
  - 帅气
address:
  - c: 北京
    a: 海淀区
  - c: 天津
    a: 滨海新区

若你想尝试更复杂结构的转换，可以在这个网页中在线实践。

纯量

纯量比较简单，对应的就是 js 的基本数据类型，支持如下：

字符串
布尔
数值
null
时间

比较特殊的两个，null 用 ~ 符号表示，时间大多用 2021-12-21 这种格式表示，如：

who: ~
date: 2019-09-10

转换成 JS 后：

{
  who: null,
  date: new Date('2019-09-10')
}

高级操作

在 yaml 实战过程中，遇到过一些特殊场景，可能需要一些特殊的处理。

字符串过长

在 shell 中我们常见到一些参数很多，然后特别长的命令，如果命令都写在一行的话可读性会非常差。

假设下面的是一条长命令：

$ docker run --name my-nginx -d nginx

在 linux 中可以这样处理：

$ docker run \
 --name my-nginx \
 -d nginx

就是在每行后加 \ 符号标识换行。然而在 YAML 中更简单，不需要加任何符号，直接换行即可：

cmd: docker run
  --name my-nginx
  -d nginx

YAML 默认会把换行符转换成空格，因此转换后 JSON 如下，正是我们需要的：

{ "cmd": "docker run --name my-nginx -d nginx" }

然而有时候，我们的需求是保留换行符，并不是把它转换成空格，又该怎么办呢？

这个也简单，只需要在首行加一个 | 符号：

cmd: |
  docker run
  --name my-nginx
  -d nginx

转换成 JSON 变成了这样：

{ "cmd": "docker run\n--name my-nginx\n-d nginx" }

获取配置

获取配置是指，在 YAML 文件中定义的某个配置，如何在代码（JS）里获取？

比如前端在 package.json 里有一个 version 的配置项表示应用版本，我们要在代码中获取版本，可以这么写：

import pack from './package.json'
console.log(pack.version)

JSON 是可以直接导入的，YAML 可就不行了，那怎么办呢？我们分环境解析：

在浏览器中

浏览器中代码用 webapck 打包，因此加一个 loader 即可：

$ yarn add -D yaml-loader

然后配置 loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ya?ml$/,
        type: 'json', // Required by Webpack v4
        use: 'yaml-loader'
      }
    ]
  }
}

在组件中使用：

import pack from './package.yaml'
console.log(pack.version)

在 Node.js 中

Node.js 环境下没有 Webpack，因此读取 yaml 配置的方法也不一样。

首先安装一个 js-yaml 模块：

$ yarn add js-yaml

然后通过模块提供的方法获取：

const yaml = require('js-yaml')
const fs = require('fs')

const doc = yaml.load(fs.readFileSync('./package.yaml', 'utf8'))
console.log(doc.version)

配置项复用

配置项复用的意思是，对于定义过的配置，在后面的配置直接引用，而不是再写一遍，从而达到复用的目的。

YAML 中将定义的复用项称为锚点，用& 标识；引用锚点则用 * 标识。

name: &name my_config
env: &env
  version: 1.0

compose:
  key1: *name
  key2: *env

对应的 JSON 如下：

{
  "name": "my_config",
  "env": { "version": 1 },
  "compose": { "key1": "my_config", "key2": { "version": 1 } }
}

但是锚点有个弊端，就是不能作为 变量 在字符串中使用。比如：

name: &name my_config
compose:
  key1: *name
  key2: my name is *name

此时 key2 的值就是普通字符串 _my name is *name_，引用变得无效了。

其实在实际开发中，字符串中使用变量还是很常见的。比如在复杂的命令中多次使用某个路径，这个时候这个路径就应该是一个变量，在多个命令中复用。

GitHub Action 中有这样的支持，定义一个环境变量，然后在其他的地方复用：

env:
  NAME: test
describe: This app is called ${NAME}

这种实现方式与 webpack 中使用环境变量类似，在构建的时候将变量替换成对应的字符串。

如果本文对你有启发，请甩手一个赞 👍

如有疑问或转发，请加微信 ruidoc 联系～

AD：【国外VPS推荐】 DMIT洛杉矶三网回程CN2 GIA VPS，稳定做站推荐

网络文件共享

现代配置指南——YAML 比 JSON 高级在哪？

出现背景

精简了什么？

增加了什么？

使用场景

YAML 语法

对象

数组

纯量

高级操作

字符串过长

获取配置

配置项复用

发表回复取消回复

出现背景

精简了什么？

增加了什么？

使用场景

YAML 语法

对象

数组

纯量

高级操作

字符串过长

获取配置

配置项复用

发表回复 取消回复

发表回复取消回复