前言
现在的一些开源项目的配置文件越来越多，而且对于新人也很不友好。本文就是汇集一些现代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/"
网友评论