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

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

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

• .eslintrc.json
• .eslintrc.js

出现背景

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

精简了什么？

{
  name: 'ruims'
}

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

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

name: ruims

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

names:
  - name: ruims
  - name: ruidoc

增加了什么？

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

使用场景

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

YAML 语法

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

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

对象

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

id: 1
name: 杨成功
isman: true

数组

- hello
- world

["hello", "world"]

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

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

纯量

• 字符串
• 布尔
• 数值
• null
• 时间

who: ~
date: 2019-09-10

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

高级操作

字符串过长

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

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

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

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

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

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

获取配置

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

$ yarn add -D yaml-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)

$ 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)

配置项复用

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

compose:
  key1: *name
  key2: *env

{
  "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

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