从项目配置文件学习前端

来自 : juejin.cn/post/5ce134cbf265da1 发布时间：2021-03-25

提示

根据我国《网络安全法》，您需要绑定手机号后才可在掘金社区内发布内容。

获取验证码 绑定手机 首页 首页 沸点 小册 活动 搜索历史 清空 写文章 发布沸点 登录 2019年05月19日 阅读 639 关注 从项目配置文件学习前端 .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将确保它以这种方式工作。

// @flowfunction square(n:unmber): number { return n * n;square(\"2\")// Error!复制代码

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

// @flowfunction square(n) { return n * n; // Error! cannot perform aritmetic operation because string [1] is not a numbersquare(\"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.ymlwebpack.jsonkarma.config.jsontsconfig.jsontslint.jsonrenovate.jsonpackage.jsonyarn.lockDockerfileLICENSEWORKSPACEREADME.mdRELEASE.mdTRIAGING.mdCHANGELOG.mdCONTRIBUTING.md 文章分类 阅读 文章标签 前端框架 相关推荐 豆皮范儿 3小时前 前端框架 大盘开发从入门到所见即所得 4 2 微信扫一扫 滴滴前端技术 1天前 数据可视化 前端框架 LogicFlow 边的绘制与交互 44 8 微信扫一扫 掘金泥石流 1天前 React.js 前端框架 React 组件设计指南 21 12 微信扫一扫 前端精 9天前 前端框架 前端工程丨Vue3丨TS丨封装请求多个不同域的接口 120 13 微信扫一扫 滴滴前端技术 26天前 前端框架 数据可视化 滴滴开源 LogicFlow：专注流程可视化的前端框架 315 38 微信扫一扫 林不渡 20天前 前端框架 写在2021: 值得关注/学习的前端框架和工具库 310 29 微信扫一扫 滴滴前端技术 12天前 前端框架 数据可视化 揭秘 LogicFlow 的拓展机制 73 19 微信扫一扫 132 9天前 前端框架 wean：重新实现小程序架构 25 10 微信扫一扫 徐小夕 3月前 JavaScript 前端框架 前端高效开发必备的 js 库梳理 1417 80 微信扫一扫 飞猪前端团队 1月前 前端 前端框架 像玩 jQuery 一样玩 AST 291 20 微信扫一扫 关于作者 developer @ 77hub

获得点赞203

文章被阅读18,266 相关文章 Vue数据双向绑定 63 5Typescript 中的 Partial, Readonly, Record, Pick 40 1TypeScript 条件类型的 infer 类型推断能力 21 3TypeScript 的映射类型 Mapped types (e.g. { [P in K]: T[P] }) 14 0TypeScript 的 类型保护机制 6 0 目录 分享