從0-1搭建一個web項目(package.json)詳解

本章分析package.json文件詳解

本文主要對packge.json配置子文件詳解

ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 開源的后臺管理框架。在一定程度上節省您的開發效率。另外本項目還封裝了一些常用組件、hooks、指令、動態路由、按鈕級別權限控制等功能。感興趣的小伙伴可以訪問源碼點個贊地址

在這里插入圖片描述

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

.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文件內容的詳細解釋：

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 文件非常相似，因為它也使用模式匹配來指定要忽略的文件和目錄。

*.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 文件

// @see: http://eslint.cnmodule.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 文件非常相似，因為它也使用模式匹配來指定要忽略的文件和目錄。

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

深入解析.prettierrc.cjs 文件

// @see: https://www.prettier.cnmodule.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",// 指定要使用的解析器，不需要寫文件開頭的 @prettierrequirePragma: 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 文件

// @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 文件

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"]
};