现代 JavaScript 库常见配置文件

前言

现在的一些开源项目的配置文件越来越多，而且对于新人也很不友好。本文就是汇集一些现代JavaScript库中常见配置文件，并做简单的介绍。

项目简单介绍（README.md）
协议（LICENSE）
webpack配置（webpack.config.js）
Babel配置（.babelrc）
ESLin配置（.eslintrc）
TSLint配置（tslint.json）
代码格式化（.prettierrc）
编辑器规范（.editorconfig）
浏览器支持（.browserslistrc）
git提交（.gitignore）
npm配置（.npmrc）

项目简单介绍（README.md）

README.md是项目中最常见的一个文件了，该文件主要就是作为项目的一个简单介绍，一般包括项目简介，使用者指南等内容。另外，可以使用如下图所示的徽章来呈现更直观的信，该网站专门制作各种徽章：Shields.io

徽章

协议（LICENSE）

如果是做一个开源项目则必须要选择一个协议，选择什么协议可以参考下面阮一峰老师的这张图：

开源协议选择

webpack 配置（webpack.config.js）

webpack作为现代化前端首选项目构建工具，自然少不了对webpack的配置，关于它的配置在此不做详细说明。对于webpack的配置一般会分为开发模式和生产模式，自然会有webpack.config.dev.js和webpack.config.prod.js文件，可参考create-react-app中的webpack配置，也有助于学习webpack

Babel 配置（.babelrc）

配置介绍：Config Files
tips：babel 7.x引入了babel.config.js来写Babel配置

下面是ant design中引入按需加载的配置示例：

{
  "presets": ["react-app"],
  "plugins": [
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
    ]
  ]
}

ESLin 配置（.eslintrc）

ESLint配置介绍：ESLint Configuring
ESLint规则查阅：ESLin Rulest

ESLint可以有效的检查项目的代码错误及规范，下面这段代码是简单的ESLint文件配置：

extends属性可以从一些基础配置中继承已启用的规则：

airbnb：该规范推荐了ES6的语法，也是目前整个前端界比较公认的方案：airbnb/javascript
eslint:recommended：ESLint的推荐规范
plugin:react/recommended：React的推荐规范（eslint-plugin-react）

rules中可自定义ESLint规则，规则有下面三个级别：

"off" 或 0：关闭某个规则
"warn" 或1：启用某个规则，不符合规范会提示警告
"error" 或2：启用某个规则，不符合规范直接提示错误

{
  "parser": "babel-eslint",
  "extends": ["react-app", "airbnb", "prettier", "plugin:react/recommended"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "plugins": ["import", "react"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
    "react/jsx-wrap-multilines": "off",
    "react/require-default-props": "off",
    "import/no-dynamic-require": "warn",
    "import/no-extraneous-dependencies": ["error", { "optionalDependencies": true }],
    "import/no-unresolved": ["error", { "ignore": ["^@/", "^umi/"] }],
    "import/newline-after-import": "warn",
    "arrow-body-style": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "global-require": "off",
    "linebreak-style": "off",
    "no-else-return": "off",
    "no-nested-ternary": "warn",
    "no-param-reassign": ["off", { "props": false }],
    "no-plusplus": "off",
    "no-underscore-dangle": "off",
    "no-unused-expressions": ["error", { "allowTaggedTemplates": true }],
    "no-use-before-define": ["error", { "functions": false, "classes": false }],
    "prefer-template": "warn",
    "strict": "off"
  }
}

TSLint 配置（tslint.json）

TSLint规则查阅：TSLin Rulest

TSLint与上述ESLint作用一致，是对项目中TypeScript语法的检查，下面是ant-design-pro的tslint.json文件

{
  "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
  "rules": {
    "no-var-requires": false,
    "no-submodule-imports": false,
    "object-literal-sort-keys": false,
    "jsx-no-lambda": false,
    "no-implicit-dependencies": false,
    "no-console": false
  }
}

代码格式化（.prettierrc）

配置介绍：Configuration File

下面是个人推荐的prettier配置：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "proseWrap": "preserve"
}

编辑器规范（.editorconfig）

EditorConfig官网：EditorConfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

浏览器支持（.browserslistrc）

browserslist的数据来自Can I use
详细参数介绍：browserslist full-list

# Browsers that we support

last 2 version
> 1%
not dead
not ie <= 11
Firefox ESR
not op_mini all

git 提交（.gitignore）

.gitignore文件也是项目必备的一个配置文件，一般在提交代码时不会提交node_modules，build等目录中的文件，所以通过该文件来忽略不必要的文件提交

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

npm 配置（.npmrc）

在之前的 npm 总结（一）一中，介绍到了项目下的.npmrc文件是具有最高优先级的，也就是说npm优先读取.npmrc文件中的npm配置，所以可在此文件中设置一些特殊的npm配置。如果使用yarn的话就创建.yarnrc文件，作用同.npmrc文件

下面是通过.yarnrc文件来修改yarn的仓库源以保证下载相同的依赖：

registry "https://registry.yarnpkg.com/"