从0-1搭建一个web项目(package.json)详解

本章分析package.json文件详解

本文主要对packge.json配置子文件详解
ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞地址

首先分析一下有哪些配置项文件

javascript 复制代码

.editorconfig
.eslintignore
.eslintrc.cjs
.prettierignore
.prettierrc.cjs
.stylelintignore
.stylelintrc.cjs
commitlint.config.cjs
lint-staged.config.cjs
package-lock.json
pnpm-lock.yaml

那么以上文件都是什么作用呢？可以配置哪些属性呢？接下来我们一一拆分

深入解析 .editorconfig 文件

亿点小知识 .editorconfig 文件是一个帮助开发者在不同编辑器和IDE之间定义和维护一致代码风格的配置文件。它允许你指定不同文件或文件类型的代码风格规则，从而确保团队成员使用统一的代码格式。

.editorconfig 文件的基本结构
.editorconfig 文件是一个简单的INI文件，包含了多个以[section]开头的部分，每个部分内定义了一系列的key = value键值对。这些键值对定义了特定的代码风格规则。
属性解释
下面是对你给出的.editorconfig文件内容的详细解释：

javascript 复制代码

root = true 
这告诉编辑器.editorconfig文件位于项目的根目录，其他目录中的.editorconfig文件应该被忽略。
[*]
这是一个通配符，表示以下规则适用于项目中的所有文件。
charset = utf-8：设置文件字符集为UTF-8，这是现代软件开发中最常用的字符集。
end_of_line = lf：指定换行符为LF（Line Feed），这是Unix和Linux系统的标准换行符。
insert_final_newline = true：确保每个文件都以一个新行结束，这有助于一些工具和编辑器正确地处理文件。
indent_style = space：使用空格进行缩进，而不是制表符（Tab）。
indent_size = 2：缩进的大小为2个空格。
max_line_length = 130：限制每行的最大长度为130个字符，以提高代码的可读性。
[*.md]
这是一个特定的文件类型通配符，表示以下规则仅适用于.md文件（Markdown文件）。
max_line_length = off：对于Markdown文件，关闭最大行长度限制。Markdown文件经常包含长的列表项或引用，所以关闭此限制更为合适。
trim_trailing_whitespace = false：不修剪Markdown文件末尾的空格。在某些情况下，Markdown文件中的末尾空格可能是有意为之的。

如何使用 .editorconfig 文件
要使用.editorconfig文件，你需要确保你的编辑器或IDE支持它。大多数现代编辑器和IDE（如Visual Studio Code、Sublime Text、IntelliJ IDEA等）都内置了对.editorconfig文件的支持。只需将.editorconfig文件放在项目的根目录，并确保你的编辑器或IDE已启用对它的支持即可。

深入解析 .eslintignore 文件

亿点小知识 .eslintignore 文件是一个文本文件，用于指定 ESLint 应该忽略哪些文件或目录。这个文件通常位于项目的根目录下，并且其语法与 .gitignore 文件非常相似，因为它也使用模式匹配来指定要忽略的文件和目录。

javascript 复制代码

*.sh：这个模式会忽略所有以 .sh 结尾的文件，即 Shell 脚本文件。由于这些文件不是 JavaScript 或 TypeScript，因此通常不需要 ESLint 来检查。
node_modules：这个目录包含了项目的所有依赖项。由于这些文件是第三方库，通常不需要进行 linting。此外，linting node_modules 目录可能会导致大量的性能问题，因为其中包含大量文件。
*.md：忽略所有的 Markdown 文件（.md 扩展名）。Markdown 文件主要用于文档编写，而不是代码编写，因此不需要 ESLint 检查。
*.woff 和 *.ttf：这些是字体文件的扩展名。它们不是源代码文件，因此不需要 ESLint 来进行代码风格检查。
.vscode 和 .idea：这些目录通常包含特定 IDE（如 Visual Studio Code 或 IntelliJ IDEA）的配置文件和缓存文件。这些文件不是源代码，因此应该被忽略。
dist：这个目录通常包含编译后的文件（如构建输出）。这些文件是在源代码文件基础上生成的，因此不需要进行 linting。
/public 和 /docs：这些目录可能包含静态资源、文档或其他非源代码文件，因此应该被 ESLint 忽略。
.husky：这个目录通常包含与 Git 钩子（hooks）相关的配置，用于在 Git 操作（如提交）之前或之后运行脚本。这些文件不是源代码，因此不需要 ESLint 检查。
.local：这个目录可能包含本地开发环境的特定配置或数据，与源代码无关，因此应该被忽略。
/bin：这个目录可能包含一些执行脚本或其他可执行文件，它们通常不是 JavaScript 或 TypeScript 编写的，因此不需要 ESLint 检查。
/src/mock/*：这个模式会忽略 src/mock 目录下的所有文件。这可能是因为这些文件包含模拟数据或测试数据，而不是实际的源代码。
stats.html：这是一个具体的文件名，可能是一个 Webpack 打包统计文件或其他类型的报告文件。由于它不是源代码，因此应该被 ESLint 忽略。

深入解析 .eslintrc.cjs 文件

javascript 复制代码

// @see: http://eslint.cn

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  // 指定如何解析语法
  parser: "vue-eslint-parser",
  // 优先级低于 parse 的语法解析配置
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
    jsxPragma: "React",
    ecmaFeatures: {
      jsx: true
    }
  },
  // 继承某些已有的规则
  extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
  /**
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  rules: {
    // eslint (http://eslint.cn/docs/rules)
    "no-var": "error", // 要求使用 let 或 const 而不是 var
    "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
    "prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
    "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
    "no-irregular-whitespace": "off", // 禁止不规则的空白

    // typeScript (https://typescript-eslint.io/rules)
    "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
    "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
    "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
    "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间。
    "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
    "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
    "@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
    "@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句
    "@typescript-eslint/no-empty-function": "off", // 禁止空函数
    "@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们
    "@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
    "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
    "@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型

    // vue (https://eslint.vuejs.org/rules)
    "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
    "vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
    "vue/no-mutating-props": "off", // 不允许组件 prop的改变
    "vue/no-v-html": "off", // 禁止使用 v-html
    "vue/custom-event-name-casing": "off", // 为自定义事件名称强制使用特定大小写
    "vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
    "vue/one-component-per-file": "off", // 强制每个组件都应该在自己的文件中
    "vue/html-closing-bracket-newline": "off", // 在标签的右括号之前要求或禁止换行
    "vue/max-attributes-per-line": "off", // 强制每行的最大属性数
    "vue/multiline-html-element-content-newline": "off", // 在多行元素的内容之前和之后需要换行符
    "vue/singleline-html-element-content-newline": "off", // 在单行元素的内容之前和之后需要换行符
    "vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式
    "vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
    "vue/multi-word-component-names": "off" // 要求组件名称始终为 "-" 链接的单词
  }
};

深入解析 .prettierignore 文件

亿点小知识 .prettierignore 文件是一个文本文件，用于指定 Prettier 应该忽略哪些文件或目录。这个文件通常位于项目的根目录下，并且其语法与 .gitignore 文件非常相似，因为它也使用模式匹配来指定要忽略的文件和目录。

javascript 复制代码

# .prettierignore 文件内容  
  
# 忽略 dist 目录下的所有文件  
/dist/*  
  
# 忽略 .local 目录或文件（如果存在）  
.local  
  
# 忽略 node_modules 目录下的所有文件和子目录  
/node_modules/**  
  
# 忽略所有目录下的 .svg 文件  
**/*.svg  
  
# 忽略所有目录下的 .sh 文件  
**/*.sh  
  
# 忽略 public 目录下的所有文件  
/public/*  
  
# 忽略名为 stats.html 的文件  
stats.html

深入解析.prettierrc.cjs 文件

javascript 复制代码

// @see: https://www.prettier.cn

module.exports = {
  // 指定最大换行长度
  printWidth: 130,
  // 缩进制表符宽度 | 空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
  useTabs: false,
  // 结尾不用分号 (true：有，false：没有)
  semi: true,
  // 使用单引号 (true：单引号，false：双引号)
  singleQuote: false,
  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
  trailingComma: "none",
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
  bracketSpacing: true,
  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
  bracketSameLine: false,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
  arrowParens: "avoid",
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
  insertPragma: false,
  // 用于控制文本是否应该被换行以及如何进行换行
  proseWrap: "preserve",
  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
  htmlWhitespaceSensitivity: "css",
  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
  endOfLine: "auto",
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
  rangeStart: 0,
  rangeEnd: Infinity
};

深入解析commitlint.config.cjs 文件

javascript 复制代码

// @see: https://cz-git.qbenben.com/zh/guide
const fs = require("fs");
const path = require("path");

const scopes = fs
  .readdirSync(path.resolve(__dirname, "src"), { withFileTypes: true })
  .filter(dirent => dirent.isDirectory())
  .map(dirent => dirent.name.replace(/s$/, ""));

/** @type {import('cz-git').UserConfig} */
module.exports = {
  ignores: [commit => commit.includes("init")],
  extends: ["@commitlint/config-conventional"],
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
    "body-leading-blank": [2, "always"],
    "footer-leading-blank": [1, "always"],
    "header-max-length": [2, "always", 108],
    "subject-empty": [2, "never"],
    "type-empty": [2, "never"],
    "subject-case": [0],
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "build",
        "ci",
        "chore",
        "revert",
        "wip",
        "workflow",
        "types",
        "release"
      ]
    ]
  },
  prompt: {
    messages: {
      type: "Select the type of change that you're committing:",
      scope: "Denote the SCOPE of this change (optional):",
      customScope: "Denote the SCOPE of this change:",
      subject: "Write a SHORT, IMPERATIVE tense description of the change:\n",
      body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
      breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
      footerPrefixsSelect: "Select the ISSUES type of changeList by this change (optional):",
      customFooterPrefixs: "Input ISSUES prefix:",
      footer: "List any ISSUES by this change. E.g.: #31, #34:\n",
      confirmCommit: "Are you sure you want to proceed with the commit above?"
      // 中文版
      // type: "选择你要提交的类型 :",
      // scope: "选择一个提交范围（可选）:",
      // customScope: "请输入自定义的提交范围 :",
      // subject: "填写简短精炼的变更描述 :\n",
      // body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      // breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      // footerPrefixsSelect: "选择关联issue前缀（可选）:",
      // customFooterPrefixs: "输入自定义issue前缀 :",
      // footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
      // confirmCommit: "是否提交或修改commit ?"
    },
    types: [
      {
        value: "feat",
        name: "feat:     🚀  A new feature",
        emoji: "🚀"
      },
      {
        value: "fix",
        name: "fix:      🧩  A bug fix",
        emoji: "🧩"
      },
      {
        value: "docs",
        name: "docs:     📚  Documentation only changes",
        emoji: "📚"
      },
      {
        value: "style",
        name: "style:    🎨  Changes that do not affect the meaning of the code",
        emoji: "🎨"
      },
      {
        value: "refactor",
        name: "refactor: ♻️   A code change that neither fixes a bug nor adds a feature",
        emoji: "♻️"
      },
      {
        value: "perf",
        name: "perf:     ⚡️  A code change that improves performance",
        emoji: "⚡️"
      },
      {
        value: "test",
        name: "test:     ✅  Adding missing tests or correcting existing tests",
        emoji: "✅"
      },
      {
        value: "build",
        name: "build:    📦️   Changes that affect the build system or external dependencies",
        emoji: "📦️"
      },
      {
        value: "ci",
        name: "ci:       🎡  Changes to our CI configuration files and scripts",
        emoji: "🎡"
      },
      {
        value: "chore",
        name: "chore:    🔨  Other changes that don't modify src or test files",
        emoji: "🔨"
      },
      {
        value: "revert",
        name: "revert:   ⏪️  Reverts a previous commit",
        emoji: "⏪️"
      },
      {
        value: "wip",
        name: "wip:      🕔  work in process",
        emoji: "🕔"
      },
      {
        value: "workflow",
        name: "workflow: 📋  workflow improvements",
        emoji: "📋"
      },
      {
        value: "type",
        name: "type:     🔰  type definition file changes",
        emoji: "🔰"
      }
      // 中文版
      // { value: "feat", name: "特性:   🚀  新增功能", emoji: "🚀" },
      // { value: "fix", name: "修复:   🧩  修复缺陷", emoji: "🧩" },
      // { value: "docs", name: "文档:   📚  文档变更", emoji: "📚" },
      // { value: "style", name: "格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: "🎨" },
      // { value: "refactor", name: "重构:   ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: "♻️" },
      // { value: "perf", name: "性能:    ⚡️  性能优化", emoji: "⚡️" },
      // { value: "test", name: "测试:   ✅  添加疏漏测试或已有测试改动", emoji: "✅" },
      // { value: "build", name: "构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）", emoji: "📦️" },
      // { value: "ci", name: "集成:   🎡  修改 CI 配置、脚本", emoji: "🎡" },
      // { value: "chore", name: "回退:   ⏪️  回滚 commit", emoji: "⏪️" },
      // { value: "revert", name: "其他:   🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: "🔨" },
      // { value: "wip", name: "开发:   🕔  正在开发中", emoji: "🕔" },
      // { value: "workflow", name: "工作流:   📋  工作流程改进", emoji: "📋" },
      // { value: "types", name: "类型:   🔰  类型定义文件修改", emoji: "🔰" }
    ],
    useEmoji: true,
    scopes: [...scopes],
    customScopesAlign: "bottom",
    emptyScopesAlias: "empty",
    customScopesAlias: "custom",
    allowBreakingChanges: ["feat", "fix"]
  }
};

深入解析lint-staged.config.cjs 文件

javascript 复制代码

module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.md": ["prettier --write"]
};

如碰到其他的问题可以私下我一起探讨学习

如果对你有所帮助还请点赞收藏谢谢~！

关注收藏博客作者会持续更新...