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

背景

自己撸一个脚手架的时候,需要为脚手架提供一个配置文件,然后发现有好多种配置文件的格式可以选择,比如 .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

附录

其它配置文件格式

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章