coder-Tom

一个喜欢代码， 音乐，读书， 跑步， 记录生活的程序员

0%

项目中为什么有那么多配置文件？

发表于 更新于 分类于

为什么在我的简单的 web 项目中有这么多的配置文件？

image-20221026164733995

在从事任何 Web 开发项目时，您是否遇到过一些奇怪而神秘的配置文件？即使是一个简单的小项目也可能有ー—eslintrc.js, .eslintignore, .editorconfig，tsconfig.json，pretier.config.js，firebase.src 等等。

让我们浏览一下常见的 javascript 配置文件，并检查它们主要用于什么。

一些配置文件可以用多种语言编写，通常是: Javascript (. js)、 json、 yaml、 toml。

格式化操作

对于任何项目来说，保持一致的代码格式和维护代码质量都是非常关键的，而且在与一个大型团队合作时会变得非常困难。下面是一些工具及其使用方法，以及它们的配置文件。

image-20221026165130441

.editorconfig

此文件用于以一致的方式格式化代码，并防止编辑器的默认代码格式化程序处理此文件。这主要用于开源项目中的一致性行为。

image-20221026165254058

.prettier

这是一个名为 Prettier 的广泛使用的格式化扩展插件的配置文件。它与上面的文件类似，但不完全一样。这包含一组代码格式化规则，通常在保存文件后触发格式化程序时应用这些规则。

1
2
3
4
5
6
{
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true
}

.stylelintrc

顾名思义，这个配置文件控制层叠样式表(CSS 文件)的格式

Stylelint 也可以使用预处理器ーー SCSS，LESS。

例如，如果任何属性使用的单位不是列出的单位，则下面的规则将引发错误。

1
2
3
4
5
{   
  "rules": {     
    "unit-allowed-list": ["em", "rem", "%"],   
  } 
}

.csslint

非常类似于 stylelintrc，但只适用于 CSS 文件。

.tailwind.config.js

这属于一个名为 Tailwind 的 CSS 库

.postcss.config.js

在使用诸如 Tailwind 之类的 CSS 库时，在将代码发布到生产环境之前，我们还需要使用这些库转换和传递样式。Postcss 就是这样一个工具，这个文件包含样式的规则。

.eslint

与前面的非常相似，但是它关注的不仅仅是代码样式。它用于分析代码和检测代码质量问题。Eslint 同时使用 javascript 和 typescript。

例如，如果从未使用过变量，则下面的规则将给出一个错误

1
2
3
4
5
{
  "rules": {
    "no-unused-vars": ["error", { "vars": "local", "args": "after-used" }]
  }
}

通常，eslint和prettier一起使用，但只是为了代码质量和样式分别。

tsconfig.json

所有的类型脚本文件最终都需要被编译成 javascript 文件，而这个配置文件保持了类型脚本编译器的行为。

例如，下面的规则将确保编译器将类型脚本文件转换为针对特定风格的 javascript，即 es6。

1
2
3
4
5
6
7
{
  "compilerOptions": {
    .
    "target": "es6"  
    . 
  }
}

babel.config.js

Babel 是一个免费的开源 JavaScript 转换器，主要用于将 ES6 + 代码转换为向后兼容的 JavaScript 代码，可以由旧的 JavaScript 引擎运行。

Bundlers

在现代 Web 应用程序中，我们通常不编译 javascript 文件并直接使用它们。我们将所有的 javascript 模块绑定到一个文件中。

image-20221026170043318

webpack.config.js

这个配置文件属于 Webpack，一个静态模块捆绑器，它包含了 javascript 文件用于捆绑的目录、新文件的名称和路径的信息

还有其他广泛使用的捆绑包，如ーー Parcel (. parcelrc)、 Rollup (Rollup.config.js)、 Vite (Vite.config.js)和 Browserify。

Packaging

我们需要管理这些不同的库和模块并维护成一个列表。此外，我们还需要这些依赖项的版本。这就是包管理器的用武之地。这些管理员提供一个单一的入口点来维护项目中使用的所有包。一些包装管理器ーー NPM、yarn、 pnpm。

image-20221026170400981

Package.json

这是您的node项目的核心。它记录关于项目及其依赖关系的重要元数据，并定义包管理器使用的功能属性。

Package-lock.json

当您使用 npm 安装任何包时，它还会创建这个文件来维护您的依赖项及其依赖项、依赖项及其依赖项的列表..

这个文件不是我们可以编辑的。

yarn.lock

与 package-lock. json 类似，这个文件是在使用yarn作为包管理器时创建的。

Hosting

在某些时候，您可能希望将代码部署到某个地方，这里有一些与托管相关的文件。

image-20221026170615206

.firebaserc

在 Firebase 上托管的项目的配置设置。

image-20221026170702246

netlify.toml

承载在 Netlify 上的项目的配置设置。

Testing

在将代码发送到生产环境之前，我们必须对代码进行测试。下面是一些工具和它们的配置文件，按照它们的测试类型分组:

image-20221026170812816

End-to-end testing

Unit testing

Git

最后，Git 用于维护项目中所有文件的版本。

image-20221026171022495

.gitignore

Git 用于维护一个文件或目录列表，以便在 git 回购中进行版本跟踪时忽略这些文件或目录。

.github

这是一个 git 目录，用于检查任何用于持续集成/持续部署(CI/CD)的 GitHub 操作。

image-20221026171120897

Conclusion

这些是一些工具和配置文件，它们被领先的软件公司广泛用于网页开发。您可能会遇到与此列表具有类似配置文件的其他工具。