前端常见配置文件格式及选择

背景

自己撸一个脚手架的时候，需要为脚手架提供一个配置文件，然后发现有好多种配置文件的格式可以选择，比如.json .js或.yml等，一时有点迷茫应该选择哪个格式，查阅一些资料总结此文，以供查阅。

前端最常见的配置文件格式有.json、.config.js、.xxxrc .yml等，其它的像java中使用比较多的.xml本文不做讨论。

本文同步发布在我的个人博客：前端常见配置文件格式及选择

常见配置文件格式

.json格式

JSON（JavaScript Object Notation，JavaScript对象表示法，读作/ˈdʒeɪsən/）是一种轻量级的数据交换语言，用来传输由属性值或者序列性的值组成的数据对象。JSON 数据格式与语言无关。即便它源自JavaScript，但当前很多编程语言都支持 JSON 格式数据的生成和解析。JSON 的官方 MIME 类型是 application/json，文件扩展名是 .json。

对于前端来说，最常见的.json文件肯定是package.json了。每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。如下例：

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.2.0"
  },
  "dependencies": {
    "cheerio": "^1.0.0-rc.3",
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0"
  }
}

另外一个使用json格式的场合就是异步请求后端数据时候，经常返回content-type为application/json的数据。

优点与缺点

除了轻量化、语言无关无关等特性外，json文件的数据格式和前端的Object数据类型天然一致，所以对于前端处理起来十分方便。至于缺点，有工程经验的同学肯定都遇到过JSON数据不合法导致解析出错的情况，对于将.json文件作为配置文件的场景来说，有几点不方便的地方：

• key需要添加双引号
• 不可以添加注释
• 字符串值需要使用双引号
• ……

.json5格式

json5是json的超集, 拥有诸多json格式不支持的特性，例如：

• 允许单行或多行注释
• 字符串允许以单引号包裹
• 允许16进制的数字
• key可以是任何js里有效的标识符
• ……

json5目前处于提案阶段，如果你想在项目中使用.json5格式作为配置文件，需要引入第三方库支持它。

.[name]rc文件

这个格式文件常见的有.npmrc（npm配置文件） .eslintrc等，内容是key = value的格式，例如 .npmrc 文件中配置npm源地址：

registry=http://registry.npm.baidu-int.com

我们在npmrc官方文档中找到下面这两段话：

All npm config files are an ini-formatted list of key = value parameters. Environment variables can be replaced using ${VARIABLE_NAME}. For example:

prefix = ${HOME}/.npm-packages

……

Lines in .npmrc files are interpreted as comments when they begin with a ; or # character. .npmrc files are parsed by npm/ini, which specifies this comment syntax.

大概意思是.npmrc文件是符合ini格式key = value形式的文件，npm中使用npm/ini模块解析它。那么ini又是什么格式呢？查阅维基百科我们可以指导：

INI文件是一个无固定标准格式的配置文件。它以简单的文字与简单的结构组成，常常使用在Windows操作系统上，许多程序也会采用INI文件做为配置文件之用。Windows操作系统后来以注册表的形式取代掉INI档。INI文件的命名来源，是取自英文“初始（Initial）”的首字缩写，正与它的用途——初始化程序相应。有时候，INI文件也会以不同的扩展名，如“.CFG”、“.CONF”、或是“.TXT”代替。

.yml文件

YAML是一个可读性高，用来表达数据序列化的格式，非常适合用来书写配置文件，比json强大很多，它的基本语法结构是：

• 大小写敏感
• 使用缩进表示层级关系
• 缩进时不允许使用Tab键，只允许使用空格。
• 缩进的空格数目不重要，只要相同层级的元素左侧对齐即可

yaml支持三种数据结构：

• 对象：键值对的集合，又称为映射（mapping）/ 哈希（hashes） / 字典（dictionary）
• 数组：一组按次序排列的值，又称为序列（sequence） / 列表（list）
• 纯量（scalars）：单个的、不可再分的值

---
receipt:     Oz-Ware Purchase Invoice
date:        2012-08-06
customer:
    given:   Dorothy
    family:  Gale
   
items:
    - part_no:   A4786
      descrip:   Water Bucket (Filled)
      price:     1.47
      quantity:  4

    - part_no:   E1628
      descrip:   High Heeled "Ruby" Slippers
      size:      8
      price:     133.7
      quantity:  1

bill-to:  &id001
    street: | 
            123 Tornado Alley
            Suite 16
    city:   East Centerville
    state:  KS

ship-to:  *id001   

specialDelivery:  >
    Follow the Yellow Brick
    Road to the Emerald City.
    Pay no attention to the
    man behind the curtain.
...

YAML（.yaml 或 .yml）干脆将 JSON 中有了不够、没有不行的括号结构去掉了，只保留缩进。但编辑和阅读它总令人非常慌张，生怕数错了层次（实际上，对于阅读，语法关键字并不是越小越好）。而且在不支持统一缩进、反缩进、自动在换行时缩进的编辑环境下，这非常麻烦——这本来对编程语言来说不是什么事，但配置文件最常用的使用场景却恰恰是这样。

另外，YAML 的语法实在太多了，而且不是循序渐进的，即便你不需要复杂的功能，为了保证自己的简单功能不出错，也要对那些复杂的语法有所了解并加以避免（比如究竟什么键名可以不加引号，什么字符串可以不加引号；你总不能为了避免歧义全都加上引号，那和 JSON 也就差球不多了）。更糟的是，纵使如此复杂，想要配置一段精确的多行字符串（精确控制首尾空行数）时，却显得力不从心。再加上缩进问题，编辑多行文本实在烦不胜烦。
上面提到的eslint的配置文件也可以是.eslintrc.yml

.js文件

js格式的文件就不多说了，相信FE同学都有基本的认识。比如vue-cli的配置文件可以是vue.config.js格式，这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}

选择一个适合自己的配置文件格式

上面介绍了四种前端常见的配置文件，那么如何挑选一个适合自己的格式呢？

• 如果你的配置文件不是静态配置，需要定义文件输出、项目构建方式等信息，或者含有一些业务逻辑，那毫无疑问选择js文件，它非常容易和其它逻辑结合在一起。
• 如果是一些基本的key=value形式的数据，而且value都是简单的字符串，那么.xxxrc格式就很适合，当然你需要引入一些第三方库去解析它。
• 如果你的配置比较复杂，嵌套层级较多，那么.yml格式也是个不错的选择
• JSON更容易被js直接读取，比如package.json或者vscode编辑器的配置文件也是json，但是json不太适合手写

作者遇到的场景是，开发一个脚手架工具，通过一个配置文件记录需要从拿个npm源及仓库里拉取项目模板，并且用户可以通过命令行设置这一配置文件，即有读取和写入文件的场景(除了js外其它应该都比较容易修改后写入)。因为配置文件简单，内容只有两项且都是字符串，没有嵌套场景，所以选用了.xxxrc文件格式。

备注

前面提到了eslint的配置文件可以是.eslintrc .eslintrc.js ，事实上，如果这些配置文件出现在同一级目录下时ESLint只会使用一个。ESLint会按照以下优先级（从高到低）读取：

• .eslintrc.js
• .eslintrc.yaml
• .eslintrc.yml
• .eslintrc.json
• .eslintrc 已废弃，不推荐使用
• package.json

附录

其它配置文件格式

• HOCON(Human-Optimized Config Object Notation)
• TOML v0.5.0

参考文献

• JSON5
• JSON-维基百科
• YAML 语言教程-阮一峰
• YAML-维基百科
• Configuring ESLint
• vue-config.js
• TOML 教程 - 可能是目前最好的配置文件格式