前端项目 工具配置篇

peaky
210 阅读8分钟

一、初始化项目

  1. 创建项目管理文件package.json
    • 使用工具：包管理器
      • 举例：npm、yarn、pnpm
        • 区别
          • 性能：yarn，pnpm快于npm，因为它们支持并行安装
          • 版本锁定：yarn，npm使用锁定文件（yarn.lock和package-lock.json）来确保依赖的版本在不同开发环境中的一致，pnpm不使用锁定文件，而是使用自动版本解析来确保一致性，这样减小了项目体积
          • 依赖共享：yarn，npm在安装依赖时会在项目目录中创建多个拷贝，占用磁盘空间，pnpm则使用符号链接来共享依赖，减小了磁盘空间的占用
    • 创建命令：npm init（包管理器：npm）
    • package.json：
      • 包含项目依赖项，项目配置项及项目基本信息

二、安装、配置webpack

  1. 简要介绍webpack
    • 一个前端构建工具，用于组合、打包模块（webpack里，文件 === 模块）
  2. 安装：
    • npm i -D wepack webpack-cli webpack-dev-server
      • 安装webpack-cli：webpack的命令行接口工具，简化了webpack的使用、配置和操作
      • 安装webpack-dev-server：用于开发环境的轻量级开发服务器
    • 定义webpack运行任务：
      • package.json->scripts->
        • "start":"webpack serve --open"
        • "build":"webpack --config webpack.config.js"
  3. 配置：
    • 在项目根目录下创建webpack.config.js文件
      • 注：webpack在执行构建时默认会从项目根目录下的webapck.config.js文件读取配置
    • webpack.config.js文件里的配置项
      • mode：配置指定webpack构建模式
      • entry：配置模块的入口
      • output：配置如何输出最终想要的代码
        • 配置项：
          • filename：输出文件的名称
          • path：输出文件存放在本地的目录
            • 值：path.resolve(__dirname, '目录名')
              • 注：如果采取ES模块化，就不能直接这么写了
      • module：配置如何处理模块
        • 配置项：
          • rules：配置模块的读取、解析规则
            • 值：[{配置项1},{配置项2},...]
              • 单个配置项：
                • test:正则表达式命中文件
                • use：要应用的Loader（从后往前应用）
                • include：只命中的文件
                • exclude：被排除的文件
          • noParse：忽略对没采取模块化的文件的递归解析和处理
          • parser：控制具体的模块语法解析规则
      • resolve：配置如何寻找模块所对应的文件
        • 配置项：
          • alias：为路径配置别名
          • mainFields：配置代码采取的语法
          • extensions：配置在尝试过程中用到的后缀列表
          • modules：配置去哪些目录下寻找第三方模块
          • descriptionFiles：配置描述第三方模块的文件名称
      • plugin：配置webpack的扩展功能
      • devServer：配置DevServer的行为
        • 配置项：
          • hot：是否启用模块热替换功能
            • 开启后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览，实时预览功能依赖一个注入到页面里的代理客户端去接受来自DevServer的命令和负责刷新网页的工作
          • inline：配置是否自动注入代理客户端到将运行在页面里的Chunk里去
          • contentBase：配置DevServer HTTP服务器的文件根目录
          • headers：配置在HTTP响应里注入的一些HTTP响应头
          • host：配置DevServer服务监听的地址
          • post：配置DevServer服务监听的端口
          • disableHostCheck：配置是否关闭用于DNS重绑定的HTTP请求的HOST检查
            • 关闭后可接受来自任何HOST的请求（搭配--host 0.0.0.0使用）
          • https：配置服务协议
            • 配置后DevServer会自动生成一份HTTPS证书
      • 其他配置项：
        • target：配置webpack构建出针对不同运行环境的代码
        • devtool：配置webpack如何生成source map
          • 配置了"inline-source-map"后能快速找到错误代码所在位置
        • watch：支持监听文件更新
          • 不使用DevServer时，默认关闭，使用DevServer时，默认开启
        • watchOptions：配置更灵活的监听模式
          • 配置项：
            • ignored：配置不监听的文件或文件夹
            • aggregateTimeout：配置监听到变化后多久再执行动作
            • poll：配置多久询问一次系统文件是否有变化
        • externals：配置指定webpack不用打包的模块
        • resolveLoader：配置webpack如何去寻找loader
          • 配置项：
            • modules：配置寻找目录
            • extensions：配置入口文件的后缀
            • mainFields:配置入口文件位置的字段
  4. 在webpack里集成ts
    • 简要介绍typescript
      • js的一个超集，ts为js增加了类型系统，让代码变得更健壮、更易维护
    • 基础配置：
      • 安装ts编译器和loader
        • npm i -D typescript ts-loader
      • 添加ts配置文件tsconfig.json
      • 配置webpack处理ts：[webpack.config.js]
        • mudole-> rules->
          • test: /.tsx?$/,
          • use: 'ts-loader',
          • exclude: /node_modules/
        • module -> resolve ->
          • extensions: ['.tsx', '.ts', '.js']
  5. 在webpack里配置babel
    • 简要介绍babel
      • 一个JS编译器，将ES6代码转为浏览器可直接执行的ES5代码，
    • 安装：
      • npm i -D babel-plugin-transform-runtime babel-runtime babel-core babel-loader babel-preset-env
        • babel-plugin-transform-runtime：减少进行代码转换时产生的冗余代码
        • babel-runtime：减小编译过程中生成的js代码体积并提供一些运行时支持
        • babel-core babel-loader：webpack接入babel必须依赖的模块
        • babel-preset-env：babel的一个preset
          • 用于根据目标环境自动确定需要的babel插件和转译规则
    • 配置：
      • 在项目根目录下创建.babelrc配置文件 image.png
      • 在webpack里使用babel [webpack.config.js]
        • module -> rules ->
          • test: /.js$/
          • use: ['babel-loader']

三、配置代码检查工具

  1. 配置eslint
    • 简要介绍eslint
      • 一个检查代码质量与风格的工具
    • 具体配置
      • npm init @eslint/config
        • 在进行一系列选择后，会自动生成eslint配置文件 image.png
      • 在项目根目录下创建.eslintignore文件：配置eslint不用检查的文件
      • 定义eslint执行检查和修复的任务 [package.json]
        • scripts-> "lint":"eslint . --config .eslintrc.js --fix",
      • eslint的相关命令
        • 检查：npx eslint 文件名
          • npx：一个node.js工具，不是包管理器，用于执行本地和远程安装的npm包中的命令，就不用全局安装这些包，安装变得更灵活
        • 修复：npx eslint --fix 文件名
    • 在vscode里安装eslint扩展
      • 优点
        • 提供实时检测并突出显示代码中的问题，提供修复建议，简化代码维护
      • 配置扩展
        • 方式1
          • 点击vscode里的设置图标 image.png
          • 如果要应用到全部项目，点击左边的用户
            如果只是当前项目，点击右边的工作区 image.png
          • 点击扩展，找到ESLint，直接选择想要的配置方式或者打开settings.json(会自动在项目里创建settings.json文件) image.png
        • 方式2
          • 在当前项目的根目录下创建.vscode文件夹，里面创建settings.json文件 image.png
  2. 配置prettier
    • 简要介绍prettier
      • 一个代码格式化工具
    • 安装
      • npm install prettier -D
    • 配置
      • 创建.prettierrc和.prettierignore文件
      • 定义prettier检查和修复代码的命令：[package.json]
        • scripts -> "format":"prettier . --config .prettierrc --write"
    • prettier相关命令
      • 检查：npx prettier --check 文件名
      • 修复：npx prettier --write 文件名
  3. 处理prettier与eslint的冲突
    • 安装
      • npm i -D eslint-config-prettier eslint-plugin-prettier
        • eslint-config-prettier：一个ESLint配置，禁用与ESLint冲突的Prettier规则
        • eslint-plugin-prettier：一个ESLint插件，用于在ESLint里运行Prettier并检查代码格式是否符合Prettier的规则，在eslint运行之前运行prettier
    • 配置ESLint
      • extends -> 添加"prettier"
    • 说明
      • 假设eslint设置为双引号，prettier设置为单引号，如果不进行冲突处理，结果就会不停报错，设置单引号时eslint报错，设置双引号时prettier报错，当进行上述处理后，运行eslint检查并修复后，不会再产生报错
  4. 配置stylelint
    • 简要介绍stylelint
      • 一个用于检查和强化css和相关样式表的工具
    • 安装
      • npm i -D stylelint
    • 配置
      • 在项目根目录下创建.stylelintrc，.stylelintignore文件
    • 与eslint集成
      • 安装eslint配置
        • npm i -D eslint-config-stylelint
      • 配置.stylelintrc文件
        • "extends":"stylelint-config-standard"
        • "rules""{//自定义样式规则}
      • 配置eslint
        • "extends":["stylelint"]
      • 配置效果
        • 在运行eslint时同时会应用stylelint规
  5. 配置husky
    • 简要介绍husky
      • 用于在Git钩子中运行脚本的工具
        • Git钩子：在特定的git事件（如提交推送等）发生时触发的自定义脚本
    • 初始化配置 [cmd环境]
      • npx husky-init ; npm install
        • 注意：命令执行完husky的安装配置都会完成，.husky文件夹会创建，把所有的脚本文件移动到.husky/_目录下，否则在执行命令时会无法找到脚本文件
      • 配置git钩子（以pre-commit为例）
        • 从字面来理解，这个钩子是在git提交前触发，文件内容见下： image.png
        • 文件内容显示运行的是test命令，现在我们在package.json里配置test对应命令
          • "test":"npm run lint && npm run format"
            • 配置完成后，运行提交命令时将会检查代码规范，如果不符合要求就不能提交成功
  6. 在项目根目录下配置.editorconfig文件
    • .editorconfig用途
      • 配置代码编辑器行为（比如定义缩进风格、换行符类型），保持项目中不同文件的一致性

四、配置版本管理工具

  1. 配置git仓库和远程仓库
    • 打开git bash或命令行
    • git init：初始化一个git仓库，做版本管理
    • git remote add origin 远程仓库url：添加远程仓库（远程仓库：负责托管代码）
    • git add 文件名 或 git add .：提交工作区代码到暂存区
    • git commit -m "提交信息"：提交暂存区的代码到Git版本库里
    • git push origin 远程仓库的分支名：提交git版本库里的代码到远程仓库
  2. 远程仓库url
    • 远程仓库的创建
      • 打开github image.png
    • 仓库地址：仓库创建完成后页面的URL

五、其他

  1. 比较CommonJS跟ES模块：都是一种模块化规范
    • CommonJS：
      • 导入、导出：require、modules.exports
      • 运行环境：Node.js
    • ES6：
      • 导入、导出：import、export
      • 运行环境：浏览器、一些支持ES6模块的Node.js
  2. 文件结构的快速生成：
    • 方式1：
      • vsocde扩展：file-tree-generate
        • 安装后点击对应文件夹右键选择Generate to Tree -> 一键生成对应文件结构
    • 方式2：
  • 参考资源：
    • 各工具官网
    • 深入浅出webpack
    • vscode扩展：CHAT-GPT中文版
  • 项目地址
  • 感想：
    • 现在才做完基本的配置流程，更多配置细节，还需要在项目中不断实践
    • emm，关于各种工具的配置项，有看过官网文档，里面的配置项还是有一定数量的，，哈哈渐渐用起来把！
avatar
文章
阅读
粉丝