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

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

這些配置對前端非常友好，因為都是我們熟悉的 JS 對象結(jié)構(gòu)。一般靜態(tài)化的配置會選擇 json 文件，而動態(tài)化的配置，涉及到引入其他模塊，因此會選擇 js 文件。

還有現(xiàn)在許多新工具同時支持多種配置，比如 Eslint，兩種格式的配置任你選擇：

• .eslintrc.json
• .eslintrc.js

后來不知道什么時候，突然出現(xiàn)了一種以 .yaml 或 .yml 為后綴的配置文件。一開始以為是某個程序的專有配置，后來發(fā)現(xiàn)這個后綴的文件出現(xiàn)的頻率越來越高，甚至 Eslint 也支持了第三種格式的配置 .eslintrc.yml。

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

下面我們從 YAML 的出現(xiàn)背景，使用場景，具體用法，高級操作四個方面，看一下這個流行的現(xiàn)代化配置的神秘之處。

出現(xiàn)背景

一個新工具的出現(xiàn)避免不了有兩個原因：

舊工具在某些場景表現(xiàn)吃力，需要更優(yōu)的替代方案舊工具也沒什么不好，只是新工具出現(xiàn)，比較而言顯得它不太好

YAML 這種新工具就屬于后者。其實在 yaml 出現(xiàn)之前 js+json 用的也不錯，也沒什么特別難以處理的問題；但是 yaml 出現(xiàn)以后，開始覺得它好亂呀什么東西，后來了解它后，越用越喜歡，一個字就是優(yōu)雅。

很多文章說選擇 yaml 是因為 json 的各種問題，json 不適合做配置文件，這我覺得有些言過其實了。我更愿意將 yaml 看做是 json 的升級，因為 yaml 在格式簡化和體驗上表現(xiàn)確實不錯，這個得承認。

下面我們對比 YAML 和 JSON，從兩方面分析：

精簡了什么？

JSON 比較繁瑣的地方是它嚴(yán)格的格式要求。比如這個對象：

{
  name: 'ruims'
}

在 JSON 中以下寫法通通都是錯的：

// key 沒引號不行
{
  name: 'ruims'
}
// key 不是 "" 號不行
{
  'name': 'ruims'
}
// value 不是 "" 號不行
{
  "name": 'ruims'
}

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

// 只能這樣
{
  "name": "ruims"
}

雖然是統(tǒng)一格式，但是使用上確實有不便利的地方。比如我在瀏覽器上測出了接口錯誤。然后把參數(shù)拷貝到 Postman 里調(diào)試，這時就我要手動給每個屬性和值加 "" 號，非常繁瑣。

YAML 則是另辟蹊徑，直接把字符串符號干掉了。上面對象的同等 yaml 配置如下：

name: ruims

沒錯，就這么簡單！

除了 "" 號，yaml 覺得 {} 和 [] 這種符號也是多余的，不如一起干掉。

于是呢，以這個對象數(shù)組為例：

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

轉(zhuǎn)換成 yaml 是這樣的：

names:
  - name: ruims
  - name: ruidoc

對比一下這個精簡程度，有什么理由不愛它？

增加了什么？

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

用 JSON 寫配置是不能有注釋的，這就意味著我們的配置不會有備注，配置多了會非常凌亂，這是最不人性化的地方。

現(xiàn)在 yaml 支持了備注，以后配置可以是這樣的：

# 應(yīng)用名稱
name: my_app
# 應(yīng)用端口
port: 8080

把這種配置丟給新同事，還怕他看不懂配了啥嗎？

除注釋外，還支持配置復(fù)用的相關(guān)功能，這個后面說。

使用場景

我接觸的第一個 yaml 配置是 Flutter 項目的包管理文件 pubspec.yaml，這個文件的作用和前端項目中的 package.json 一樣，用于存放一些全局配置和應(yīng)用依賴的包和版本。

看一下它的基本結(jié)構(gòu)：

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

你看這個結(jié)構(gòu)和 package.json 是不是基本一致？dependencies 下列出應(yīng)用依賴和版本，dev_dependencies 下的則是開發(fā)依賴。

后來在做 CI/CD 自動化部署的時候，我們用到了 GitHub Action。它需要多個 yaml 文件來定義不同的工作流，這個配置可比 flutter 復(fù)雜的多。

其實不光 GitHub Action，其他流行的類似的構(gòu)建工具如 GitLab CI/CD，circleci，全部都是齊刷刷的 yaml 配置，因此如果你的項目要做 CI/CD 持續(xù)集成，不懂 yaml 語法肯定是不行的。

還有，接觸過 Docker 的同學(xué)肯定知道 Docker Compose，它是 Docker 官方的單機編排工具，其配置文件 docker-compose.yml 也是妥妥的 yaml 格式?，F(xiàn)在 Docker 正是如日中天的時候，使用 Docker 必然免不了編排，因此 yaml 語法早晚也要攻克。

上面說的這 3 個案例，幾乎都是現(xiàn)代最新最流行的框架/工具。從它們身上可以看出來，yaml 必然是下一代配置文件的標(biāo)準(zhǔn)，并且是前端-后端-運維的通用標(biāo)準(zhǔn)。

說了這么多，你躍躍欲試了嗎？下面我們詳細介紹 yaml 語法。

YAML 語法

介紹 yaml 語法會對比 json 解釋，以便我們快速理解。

先看一下 yaml 的幾個特點：

大小寫敏感

• 使用縮進表示層級關(guān)系
• 縮進空格數(shù)不強制，但相同層級要對齊
• # 表示注釋

相比于 JSON 來說，最大的區(qū)別是用 縮進 來表示層級，這個和 Python 非常接近。還有強化的一點是支持了注釋，JSON 默認是不支持的（雖然 TS 支持），這也對配置文件非常重要。

YAML 支持以下幾種數(shù)據(jù)結(jié)構(gòu)：

對象：json 中的對象數(shù)組：json 中的數(shù)組純量：json 中的簡單類型（字符串，數(shù)值，布爾等）

對象

先看對象，上一個 json 例子：

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

轉(zhuǎn)換成 yaml：

id: 1
name: 楊成功
isman: true

對象是最核心的結(jié)構(gòu)，key 值的表示方法是 [key]: ，注意這里冒號后面有個空格，一定不能少。value 的值就是一個純量，且默認不需要引號。

數(shù)組

數(shù)組和對象的結(jié)構(gòu)差不多，區(qū)別是在 key 前用一個 - 符號標(biāo)識這個是數(shù)組項。注意這里也有一個空格，同樣也不能少。

- hello
- world

轉(zhuǎn)換成 JSON 格式如下：

["hello", "world"]

了解了基本的對象和數(shù)組，我們再來看一個復(fù)雜的結(jié)構(gòu)。

眾所周知，在實際項目配置中很少有簡單的對象或數(shù)組，大多都是對象和數(shù)組相互嵌套而成。在 js 中我們稱之為對象數(shù)組，而在 yaml 中我們叫 復(fù)合結(jié)構(gòu)。

比如這樣一個稍復(fù)雜的 JSON：

{
  "name": "楊成功",
  "isman": true,
  "age": 25,
  "tag": ["陽光", "帥氣"],
  "address": [
    { "c": "北京", "a": "海淀區(qū)" },
    { "c": "天津", "a": "濱海新區(qū)" }
  ]
}

轉(zhuǎn)換成復(fù)合結(jié)構(gòu)的 YAML：

name: 楊成功
isman: true
age: 25
tag:
  - 陽光
  - 帥氣
address:
  - c: 北京
    a: 海淀區(qū)
  - c: 天津
    a: 濱海新區(qū)

純量

純量比較簡單，對應(yīng)的就是 js 的基本數(shù)據(jù)類型，支持如下：

• 字符串
• 布爾
• 數(shù)值
• null
• 時間

比較特殊的兩個，null 用 ~ 符號表示，時間大多用 2021-12-21 這種格式表示，如：

who: ~
date: 2019-09-10

轉(zhuǎn)換成 JS 后：

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

高級操作

在 yaml 實戰(zhàn)過程中，遇到過一些特殊場景，可能需要一些特殊的處理。

字符串過長

在 shell 中我們常見到一些參數(shù)很多，然后特別長的命令，如果命令都寫在一行的話可讀性會非常差。

假設(shè)下面的是一條長命令：

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

在 linux 中可以這樣處理：

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

就是在每行后加 \ 符號標(biāo)識換行。然而在 YAML 中更簡單，不需要加任何符號，直接換行即可：

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

YAML 默認會把換行符轉(zhuǎn)換成空格，因此轉(zhuǎn)換后 JSON 如下，正是我們需要的：

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

然而有時候，我們的需求是保留換行符，并不是把它轉(zhuǎn)換成空格，又該怎么辦呢？

這個也簡單，只需要在首行加一個 | 符號：

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

轉(zhuǎn)換成 JSON 變成了這樣：

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

獲取配置

獲取配置是指，在 YAML 文件中定義的某個配置，如何在代碼（JS）里獲?。?/p>

比如前端在 package.json 里有一個 version 的配置項表示應(yīng)用版本，我們要在代碼中獲取版本，可以這么寫：

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

JSON 是可以直接導(dǎo)入的，YAML 可就不行了，那怎么辦呢？我們分環(huán)境解析：

在瀏覽器中

瀏覽器中代碼用 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 環(huán)境下沒有 Webpack，因此讀取 yaml 配置的方法也不一樣。

首先安裝一個 js-yaml 模塊：

$ yarn add js-yaml

然后通過模塊提供的方法獲?。?/p>

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

配置項復(fù)用

配置項復(fù)用的意思是，對于定義過的配置，在后面的配置直接引用，而不是再寫一遍，從而達到復(fù)用的目的。

YAML 中將定義的復(fù)用項稱為錨點，用& 標(biāo)識；引用錨點則用 * 標(biāo)識。

name: &name my_config
env: &env
  version: 1.0
 
compose:
  key1: *name
  key2: *env

對應(yīng)的 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_，引用變得無效了。

其實在實際開發(fā)中，字符串中使用變量還是很常見的。比如在復(fù)雜的命令中多次使用某個路徑，這個時候這個路徑就應(yīng)該是一個變量，在多個命令中復(fù)用。

GitHub Action 中有這樣的支持，定義一個環(huán)境變量，然后在其他的地方復(fù)用：

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

這種實現(xiàn)方式與 webpack 中使用環(huán)境變量類似，在構(gòu)建的時候?qū)⒆兞刻鎿Q成對應(yīng)的字符串。

以上就是現(xiàn)代配置YAML對比JSON優(yōu)勢分析的詳細內(nèi)容，更多關(guān)于YAML對比JSON優(yōu)勢的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論