.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 的内建工具以及一些来自于社区的非常有用的东西。
参考资料
.browserslistrc
在不同前端工具之间共享目标浏览器和Node.js版本的配置工具。
前端工程基础知识点--Browserslist (基于官方文档翻译)
.commitlintrc.json
commit message 是开发的日常操作,写好 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG,对项目的管理实际至关重要,但是实际工作中却常常被大家忽略。希望通过本文, 能够帮助大家重视和规范 commit message 的书写。
.editorconfig
在团队开发中,统一的代码格式是必要的。但是不同开发人员使用的编辑工具可能不同,这样就造成代码的differ。今天给大家分享一个很好的方法来使不同的编辑器保持一样的风格。
editorConfig编辑器配置 What is EditorConfig?
.eslintrc.json
ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。
.gitattributes
在github上,如果未指定语言,Linguist来自动识别你的代码应该归为哪一类,它是根据某种语言的代码量来决定是哪种语言的项目。如果识别有误,可以新建.gitattributes文件来进行设置。
参考资料
.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语法,并且灵活可配置。
.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语法,以及随时轻松删除它,因此可以根据你的喜好尝试在任何代码库。
参考资料
.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
查看日志也同样生效。
参考资料
.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"
...
参考资料
todo...