前端常见配置文件格式及选择
背景
自己撸一个脚手架的时候,需要为脚手架提供一个配置文件,然后发现有好多种配置文件的格式可以选择,比如.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: Dorothyfamily: Galeitems:- part_no: A4786descrip: Water Bucket (Filled)price: 1.47quantity: 4- part_no: E1628descrip: High Heeled "Ruby" Slipperssize: 8price: 133.7quantity: 1bill-to: &id001street: | 123 Tornado AlleySuite 16city: East Centervillestate: KSship-to: *id001 specialDelivery: >Follow the Yellow BrickRoad to the Emerald City.Pay no attention to theman 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 教程 - 可能是目前最好的配置文件格式
前端常见配置文件格式及选择相关推荐
- 程序常用配置文件格式介绍
文章目录 1.键值对 2.JSON 2.1 JSON 语法 2.2 JSON 实例 2.3 JSON 解析 3.XML 3.1 XML 语法 3.2 XML 实例 3.3 XML 解析 4.YAML ...
- 配置文件格式详解之终极无惑
文章目录 1.键值对 2.JSON 2.1 JSON 语法 2.2 JSON 实例 2.3 JSON 解析 3.XML 3.1 XML 语法 3.2 XML 实例 3.3 XML 解析 4.YAML ...
- 前端工程配置Nginx反向代理
前端开发时,想要通过正式域名直接访问到本地的开发环境,可以通过配置反向代理的形式来实现,如果开了反向代理,就走本地,不开则走线上. 配置两个反向代理,一个代理http页面,一个代理https页面,前者 ...
- 前端常见知识点二之浏览器
前端常见知识点之浏览器 目录 前端常见知识点之浏览器 1.web Quality(无障碍) 2.几个实用的BOM对象方法 3. cookie.sessionStroage.localStroage的区 ...
- web服务器常见配置搭建详解(超详细)
前言: 本博客借鉴一些写的比较好的博客,进行归纳总结,整理了一篇比较详细的服务器常见配置搭建教程 一来是和大家一起分享,二来也是作为自己的学习笔记记录一下. 温馨提示: 篇幅较长,请分阶段选择性查看. ...
- PyCharm软件常见配置
官网下载地址:https://www.jetbrains.com/pycharm/download/#section=windows PyCharm软件安装 Pycharm下载 Python后期会有很 ...
- 前端常见跨域问题解决方案
前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: & ...
- Struts2学习笔记(一)--入门常见配置
Struts2框架的学习路线 l 第一天:Struts2的概述.Struts2的入门.Struts2常见的配置.Struts2的Action的编写 l 第二天:Struts2的数据的封装.结果页面配 ...
- 常用配置文件格式比较
分类 properties josn yaml hocon 轻松支持比较复杂的配置 除了properties 和 json 在复杂的配置文件下,可选择YAML或HOCON YAML: 适用场景:多层级 ...
最新文章
- 温泉关一役历史资料(电影:斯巴达300勇士)
- 实习笔记0708 https协议/ django中间件/接口测试/内网与外网/域名系统DNS
- 如何将iPhone应用程序从应用程序库移动到主屏幕
- 3DShader之移位贴图(Displacement Mapping)
- 拓端tecdat|r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- docker容器启动失败解决办法
- Mybatis-学习笔记(8)常用的注解
- eda技术试卷_EDA技术试题库
- Oracle数据库update用法总结
- CLOCs: Camera-LiDAR Object Candidates Fusion for 3D Object Detection(论文阅读笔记)
- Vue弹性标题栏(收缩扩张标题栏背景)
- HBase原理 -Regin切分
- 最短路——最短路计数(spfa)
- JAVA 删除File文件中的内容。
- mysql 不免费了? java收费还远吗?
- 硬件描述语言Verilog学习(五)
- 分析器错误信息:nbsp;无法识别的配置节…
- 部署storm和配置文件详解
- 有剩余空间为何不能复制文件?
- Word中关于参考文献连续引用
热门文章
- 浅谈搜索引擎和传统数据库(ES,solr)
- java 生成bdf
- 计算机工程毕业论文任务书,计算机工程毕业设计论文任务书开题报告模板.doc...
- 使用ASP.NET做android的后台服务
- linux 查看网卡损坏,Linux服务器网卡驱动安装及故障排除
- 在Windows server2012R2上面解压安装MySQL出现丢失msvcp100.dll(亲测有效)
- CSUST 2021银川选拔赛
- SQL Server 数据库技术及应用
- What will matter?
- coco数据集大小分类_COCO数据集的标注格式