Print

前端工程化之项目搭建初始化指南

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/195594.html

目录文章目录
  1. 一、项目初始化及配置
  2. 二、规范代码与提交

本系列是一个从 0 到 1 的实现过程，如果您有耐心跟着实现，您可以实现一个完整的react18 + ts5 + webpack5 + 代码质量&代码风格检测&自动修复 + storybook8 + rollup + git action实现的一个完整的组件库模板项目。

在你阅读完本文后你将会学到：

一、项目初始化及配置

package.json

package.json 是基于 Node.js 生态系统的任何项目（尤其是前端项目）的核心文件之一。它在项目中扮演了多个重要角色：

yarn init -y

{
  "name": "lint_demo",
  "version": "1.0.0",
  "description": "a lint demo ",
  "main": "dist/boundle.js",
  "author": "xxx",
  "license": "MIT",
  "private": false
}

LICENSE

LICENSE 文件是指软件项目中包含的许可证文件，用于规定该软件在何种条件下可以被使用、复制、修改和分发。LICENSE 文件通常包含了开源许可证的全文或摘要，以及适用该许可证的条款和条件。在开源软件项目中，LICENSE 文件是非常重要的，它定义了开发者和用户之间的权利和责任，确保了代码的合法使用和共享。

常见的开源许可证包括 MIT 许可证、GNU 通用公共许可证（GPL）、Apache 许可证等。每种许可证都有不同的要求和限制，开发者在选择和使用许可证时需要仔细考虑项目的需求和目标。

可以在choosealicense网站选择一个合适的

.gitignore

.gitignore文件是用来指定哪些文件或目录不应该被 Git 版本控制系统跟踪的配置文件。在项目中，有些文件（如编译生成的文件、日志文件、临时文件等）不应该被包含在版本控制中，因为它们可能包含敏感信息、过时的内容或者不必要的文件。通过.gitignore 文件，可以告诉 Git 哪些文件应该被忽略，不会被提交到代码仓库中。

使用 vscode 的 gitignore 插件，下载安装该插件之后， ctrl+shift+p 召唤命令面板，输入 Add gitignore 命令，即可在输入框输入系统或编辑器名字，来自动添加需要忽略的文件或文件夹至 .gitignore 中。

.npmrc | .yarnrc

npmrc 和 yarnrc 是两个配置文件，用于配置 npm 和 Yarn 包管理器的行为和设置。它们分别用于配置 npm 和 Yarn 的命令行工具的行为，例如设置镜像源、代理、缓存路径等。

npmrc

npmrc 是 npm 的配置文件，通常是 .npmrc 文件。你可以在项目级别或全局级别创建 .npmrc 文件来配置 npm 的行为。

配置方式：

  1. 项目级别配置： 在项目根目录下创建 .npmrc 文件，并添加所需配置。
  2. 全局级别配置： 使用命令 npm config edit 打开全局配置文件，并添加所需配置。

常见配置项：

示例：

# .npmrc

# 设置下载源为淘宝镜像，淘宝证书到期了，换了
registry=https://registry.npm.taobao.org/

# 设置代理服务器
proxy=http://proxy.example.com:8080
https-proxy=http://proxy.example.com:8080

# 设置包的缓存路径
cache=/path/to/npm-cache

# 设置全局安装包的路径
prefix=/path/to/npm-global

yarnrc

yarnrc 是 Yarn 的配置文件，通常是 .yarnrc 或 .yarnrc.yml 文件。你可以在项目级别或全局级别创建 .yarnrc 文件来配置 Yarn 的行为。

配置方式：

  1. 项目级别配置： 在项目根目录下创建 .yarnrc 文件，并添加所需配置。
  2. 全局级别配置： 使用命令 yarn config set 添加全局配置。

常见配置项：

示例：

# .yarnrc

# 设置下载源为淘宝镜像，淘宝证书到期了，换了
registry "https://registry.npm.taobao.org/"

# 设置代理服务器
proxy "http://proxy.example.com:8080"
https-proxy "http://proxy.example.com:8080"

# 设置包的缓存路径
cache-folder "/path/to/yarn-cache"

# 设置首选缓存路径
preferred-cache-folder "/path/to/preferred-cache"

配置文件中的每一行都应该是一个配置项，以 key value 的格式表示。你可以根据需要添加或修改这些配置项来定制 npm 和 Yarn 的行为。

README.md

README.md 文件通常是一个项目的说明文档，用于向其他开发者或用户介绍项目的内容、使用方法、贡献指南等信息。.md 代表 Markdown 格式，Markdown 是一种轻量级的标记语言，用于简单地排版文档。

README.md 文件通常包含以下内容：

二、规范代码与提交

代码规范

EditorConfig

前端工程化之项目搭建初始化指南 1

更改配置文件的内容如下，然后重启 vscode，因为有时候抽风，vscode 需要重新构建依赖树和缓存，所以重启之后这个报错就消失了。

{
  "compilerOptions": {
    // 基本配置
    "target": "ES5", // 编译成哪个版本的 es
    "module": "ESNext", // 指定生成哪个模块系统代码
    "lib": ["dom", "dom.iterable", "esnext"], // 编译过程中需要引入的库文件的列表
    "allowJs": true, // 允许编译 js 文件
    "jsx": "react", // 在 .tsx 文件里支持 JSX
    "isolatedModules": true,
    "strict": true, // 启用所有严格类型检查选项

    // 模块解析选项
    "moduleResolution": "node", // 指定模块解析策略
    "esModuleInterop": true, // 支持 CommonJS 和 ES 模块之间的互操作性
    "resolveJsonModule": true, // 支持导入 json 模块
    "baseUrl": "./", // 根路径
    "paths": {
      // 路径映射，与 baseUrl 关联，这个需要跟 webpack 一一对应，我们后面会讲解如何配置&使用
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },

    // 实验性选项
    "experimentalDecorators": true, // 启用实验性的 ES 装饰器
    "emitDecoratorMetadata": true, // 给源码里的装饰器声明加上设计类型元数据

    // 其他选项
    "forceConsistentCasingInFileNames": true, // 禁止对同一个文件的不一致的引用
    "skipLibCheck": true, // 忽略所有的声明文件（ *.d.ts）的类型检查
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入
    "noEmit": true // 只想使用 tsc 的类型检查作为函数时（当其他工具（例如 Babel 实际编译）时）使用它
  },
  "include": [
    "src/**/*" // 这将包括 src 目录下的所有文件
  ]
}

介绍下 tsconfig 常见的配置

在 TypeScript 5 中，tsconfig.json 文件仍然是用来配置 TypeScript 项目编译选项的主要方式。这个文件指定了编译器应遵守的规则和项目的编译上下文。以下是一些常见的配置选项和简短的描述：

compilerOptions: 该对象包含可以用来配置编译器行为的各种选项。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/