从项目配置文件学习前端

1,949 阅读6分钟

.babelrc

Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用(并创建)下一代的 JavaScript,以及下一代的 JavaScript 工具。

作为一种语言,JavaScript 在不断发展,新的标准/提案和新的特性层出不穷。 在得到广泛普及之前,Babel 能够让你提前(甚至数年)使用它们。

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译(transpiling,是一个自造合成词,即转换+编译。以下也简称为转译)。

例如,Babel 能够将新的 ES2015 箭头函数语法:

const square = n => n * n;

转译为:

const square = function square(n) {
  return n * n;
};

不过 Babel 的用途并不止于此,它支持语法扩展,能支持像 React 所用的 JSX 语法,同时还支持用于静态类型检查的流式语法(Flow Syntax)。

更重要的是,Babel 的一切都是简单的插件,谁都可以创建自己的插件,利用 Babel 的全部威力去做任何事情。

再进一步,Babel 自身被分解成了数个核心模块,任何人都可以利用它们来创建下一代的 JavaScript 工具。

已经有很多人都这样做了,围绕着 Babel 涌现出了非常大规模和多样化的生态系统。 在这本手册中,我将介绍如何使用 Babel 的内建工具以及一些来自于社区的非常有用的东西。

参考资料

babel-handbook

plugin-handbook

.browserslistrc

在不同前端工具之间共享目标浏览器和Node.js版本的配置工具。

前端工程基础知识点--Browserslist (基于官方文档翻译)

.commitlintrc.json

commit message 是开发的日常操作,写好 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG,对项目的管理实际至关重要,但是实际工作中却常常被大家忽略。希望通过本文, 能够帮助大家重视和规范 commit message 的书写。

优雅的提交你的 Git Commit Message

.editorconfig

在团队开发中,统一的代码格式是必要的。但是不同开发人员使用的编辑工具可能不同,这样就造成代码的differ。今天给大家分享一个很好的方法来使不同的编辑器保持一样的风格。

editorConfig编辑器配置 What is EditorConfig?

.eslintrc.json

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。

详细的中文官网

.gitattributes

在github上,如果未指定语言,Linguist来自动识别你的代码应该归为哪一类,它是根据某种语言的代码量来决定是哪种语言的项目。如果识别有误,可以新建.gitattributes文件来进行设置。

参考资料

gitattributes文件

Git属性

.gitignore

这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

.stylelintrc

这是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误。

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "../special-rule.j"
    ],
    "processors": [
        "stylelint-my-processor"
    ],
    "rules": {
        "block-no-empty": null,
        "rule-empty-line-before": [ "always", {
            "except": ["first-nested"],
            "ignore": ["after-comment"]
        }]
    }
}

stylelint拥有超过150条的规则,包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。它支持最新的CSS语法,并且灵活可配置。

CSS代码检查工具stylelint

stylelint构造及规则了解

.stylelintignore

提供一个全局变量或一个全局变量数组来忽略特定的样式文件,使用.stylelintignore 文件(或指向另一个忽略模式文件)来忽略特定的文件。

官网

.flowconfig

认识

Flow是JavaScript代码的静态类型检查器。 它可以帮助您提高工作效率。让您的代码更快,更智能,更自信,更大规模。

Flow通过静态类型注释检查代码是否存在错误。这些类型允许您告诉Flow您希望代码如何工作,Flow将确保它以这种方式工作。

// @flow
function square(n:unmber): number {
    return n * n;
}

square("2")// Error!

因为Flow很好地理解JavaScript,所以你甚至不需要指定类型。因此,你只需要写少量的Flow代码,它将推断其余部分。在很多时候,Flow可以完全理解您的代码而不需要任何类型。

// @flow
function square(n) {
  return n * n; // Error!  cannot perform aritmetic operation because string [1] is not a number
}

square("2");

你可以逐步引入Flow语法,以及随时轻松删除它,因此可以根据你的喜好尝试在任何代码库。

参考资料

How to configure Flow

.mailmap

这是Git的多个配置文件中的一个,在介绍它之前需要了解git shorlog命令,用于查看所有用户的提交再要,并对这些提交以用户进行分类统计。

例如,在你的任意代码仓库中运行:

git shortlog -nse

可能会得到类似下面的信息,分别是提交总计,以及姓名和邮箱

5 Zhan San <san.zhan@xxx.com>
3 zhansan <zhansan@xxx.com>
1 张三 <zhansan@xxx.com>

我们可以看出这明明是同一个人,可能因为在不同环境或设备提交的所导致。在你使用git log命令查看提交记录时,也同样会遇到同一开发者不同账号的困惑。

这时你只需要在根目录下创建一个.mailmap文件,以此告诉Git这几个账号是同一个人,且统计和日志都使用指定一个名称和邮箱。内容如下,后者账号合并至前者账号:

Zhan San <san.zhan@xxx.com> zhansan <zhansan@xxx.com>
Zhan San <san.zhan@xxx.com> 张三 <zhansan@xxx.com>

这是再使用git shorlog -nes时,就是我们想要的效果了:

9 Zhan San <san.zhan@xxx.com>

使用 git log --use-mailmap 查看日志也同样生效。

参考资料

Git Shortlog and Mailmap

Git中文开发手册

Angular-cli的.mailmap

.nvmrc

NVM全称node.js version manage,当团队需要维护不同Node版本的几个项目时,但因为直接安装的Node是在全局变量中指定的唯一地址,因此只有单个版本。这时,就可以使用nvm了。

使用package.json也可以进一步确定当前项目的node版本。例如,在文件中加入如下配置:

{
    ...
    "engines": {
        "node": "12.2.0"
    }
    ...
}

在使用npm进行包管理是不会有任何反馈,而yarn却可以检测并阻断报错:

...
[1/5] Validating package.json...
error git@1.0.0: The engine "node" is incompatible with this module. Expected version "12.2.0". Got "10.15.3"
...

参考资料

使用nvm管理多版本Node


todo...

.prettierrc.js

.watchmanconfig

.bazelignore

.bazelrc

.clang-format

.travis.yml

.appveyor.yml

webpack.json

karma.config.json

tsconfig.json

tslint.json

renovate.json

package.json

yarn.lock

Dockerfile

LICENSE

WORKSPACE

README.md

RELEASE.md

TRIAGING.md

CHANGELOG.md

CONTRIBUTING.md