前端工程中的文件

一、Dockerfile

在前端工程中，Dockerfile 用于定义构建 Docker 镜像的过程，从而将前端应用及其运行环境打包成一个可移植的容器

例子：

bash 复制代码

# 使用官方 Node.js 镜像作为基础镜像
FROM node:16-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json 文件
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制前端源代码
COPY . .

# 构建前端项目
RUN npm run build

# 使用 Nginx 镜像作为最终运行环境
FROM nginx:alpine

# 复制构建好的静态文件到 Nginx 的默认目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

二、jsconfig.json

jsconfig.json 是一个配置文件，用于为 JavaScript 项目提供额外的配置选项

路径别名配置

通过 jsconfig.json，可以定义路径别名，简化模块导入路径。例如：

perl 复制代码

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

这样，在代码中可以使用别名导入模块：

css 复制代码

import Header from '@components/Header';

模块解析配置

可以配置模块解析方式，指定如何查找模块。例如：

json 复制代码

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

类型检查

虽然 jsconfig.json 主要用于 JavaScript 项目，但它也可以启用类型检查功能，帮助捕获潜在的类型错误。例如：

json 复制代码

{
  "compilerOptions": {
    "checkJs": true,
    "jsx": "react"
  }
}

编辑器增强

jsconfig.json 可以提升开发体验，例如：

自动补全：编辑器可以根据配置提供更智能的代码补全。
导航功能：支持在项目中快速跳转到定义的模块或变量。
错误检查：实时显示代码中的潜在问题。

三、plopfile.js

plopfile.js 是 Plop 工具的配置文件，用于定义代码生成器任务。它的主要作用是通过自动化的方式简化重复性代码的创建过程，提高开发效率。以下是 plopfile.js 的具体作用：

作为 Plop 的入口文件

plopfile.js 是 Plop 工具在项目中的入口文件，它需要导出一个函数，该函数接收一个 Plop 对象作为参数，用于创建生成器任务。

ini 复制代码

module.exports = plop => {
  // 在这里定义生成器任务
};

定义生成器任务

通过 plop.setGenerator() 方法，可以在 plopfile.js 中定义多个生成器任务，每个任务用于生成特定类型的文件或代码结构。

(1) 描述生成器任务

每个生成器任务都有一个描述，用于在命令行中显示任务的用途。

vbnet 复制代码

description: '创建一个组件',

(2) 定义用户交互问题

通过 prompts 属性，可以定义一系列问题，用于在命令行中与用户交互，获取生成文件所需的信息。

css 复制代码

prompts: [
  {
    type: 'input',
    name: 'name',
    message: '组件名称',
    default: 'MyComponent'
  }
],

(3) 定义生成操作

通过 actions 属性，可以定义在获取用户输入后执行的操作，例如创建文件、修改现有文件等。

yaml 复制代码

actions: [
  {
    type: 'add',
    path: 'src/components/{{name}}/{{name}}.js',
    templateFile: 'plop-templates/component.hbs'
  }
],

使用模板文件

plopfile.js 中的生成器任务可以引用模板文件，这些模板文件通常存放在项目中的 plop-templates 目录下。

vbnet 复制代码

templateFile: 'plop-templates/component.hbs'

模板文件使用 Handlebars 语法，可以动态插入用户输入的值。

提高开发效率

plopfile.js 的主要目的是通过自动化的方式减少手动创建重复性代码的工作量，让开发者能够更专注于业务逻辑的实现。

四、babelrc.js

.babelrc.js 是一个 Babel 配置文件，用于定义项目中 JavaScript 代码的转译规则。Babel 是一个 JavaScript 编译器，主要用于将 ES6+ 语法转换为向后兼容的 ES5 语法，以便在各种浏览器中正确运行

css 复制代码

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions', 'Firefox ESR', 'not dead']
        },
        useBuiltIns: 'usage',
        corejs: 3
      }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-runtime',
    'react-hot-loader/babel'
  ]
};

五、browserslistrc

定义了项目所支持的浏览器及其版本范围。这一配置被广泛应用于多种前端工具和库中，例如 Babel、Autoprefixer、Webpack 等，以确保生成的代码能够兼容指定的浏览器。

java 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
};

六、eslintrc.cjs

.eslintrc.cjs 是一个 ESLint 配置文件，用于定义项目的代码质量和风格规则。ESLint 是一个可配置的 JavaScript 检查器，能够帮助发现代码中的问题并保持代码风格的一致性。

java 复制代码

module.exports = {
  // 指定解析器
  parser: '@babel/eslint-parser',
  // 指定环境
  env: {
    browser: true,
    es6: true
  },
  // 继承推荐规则和插件规则
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // 配置插件
  plugins: [
    'react'
  ],
  // 自定义规则
  rules: {
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'no-unused-vars': 'warn',
    'no-console': 'off'
  }
};

与 .browserslistrc 的关系 ：.browserslistrc 定义了项目支持的浏览器范围，而 .eslintrc.cjs 则关注代码质量和风格，两者共同确保代码在目标浏览器中正常运行且符合规范。
与 .commitlintrc 的关系 ：.commitlintrc 用于规范 Git 提交信息的格式，而 .eslintrc.cjs 关注代码本身的规范，两者都是项目规范的一部分，但作用于不同的层面。

七、gitattributes

件用于定义一系列与 Git 版本控制系统相关的属性，这些属性可以针对特定的文件或目录进行设置，以优化代码的存储、传输和协作流程。

ini 复制代码

# 指定所有文件使用 LF 换行符
* text=auto eol=lf

# 指定特定文件使用 CRLF 换行符
*.bat text eol=crlf
*.cmd text eol=crlf

# 指定二进制文件不进行换行符转换
*.png binary
*.jpg binary
*.gif binary

# 指定特定文件的编码格式
*.js charset=UTF-8
*.css charset=UTF-8

# 指定特定文件的缩进风格
*.js indent=4
*.css indent=2

# 指定某些文件在合并时使用特定策略
CHANGELOG.md merge=union

与 .gitignore 的关系 ：.gitignore 用于指定哪些文件或目录不应被 Git 跟踪，而 .gitattributes 则是针对被跟踪的文件定义其属性和处理方式。
与 .eslintrc.cjs 的关系 ：.eslintrc.cjs 主要关注代码质量和风格，而 .gitattributes 则从版本控制的角度确保文件的一致性和正确性。

八、Markdownlint

通常用于配置 Markdownlint 工具的规则和选项。Markdownlint 是一个用于检查 Markdown 文件是否符合特定风格和格式规则的工具。通过 .markdownlint 文件，可以定义哪些规则是启用的，哪些是禁用的，以及特定规则的配置选项。

九、 npmrc

npm（Node Package Manager）的运行时配置文件，用于定义 npm 包管理器的行为。通过这个文件，可以配置 npm 的各种选项，比如包的下载源、代理设置、认证信息等

十、prettierrc

用于定义代码格式化的规则。Prettier 是一个代码格式化工具，能够自动化地将代码转换为一致的风格，确保代码风格的一致性，减少因代码格式不同而引发的合并冲突

十一、stylelintrc

.stylelintrc.js 是一个 Stylelint 配置文件，用于定义项目的 CSS 代码风格和质量规则。Stylelint 是一个可配置的 CSS 检查器，能够帮助发现 CSS 代码中的问题并保持代码风格的一致性