從項目配置文件學習前端

.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