- 博客(121)
- 收藏
- 关注
RSS订阅原创 静态资源处理（9）
文件放入到public文件夹中，然后直接在index.html中写入。由于界面可能需要导入图片等模块，因此可以在TS声明中先声明类型。文件夹都会放一些静态资源,可以直接根据绝对路径引入。下内容复制到构建出口文件夹中,可以借助。svg类型的图片可以单独处理。进行解析,只需要打包的时候把。
2024-12-26 08:15:00
912
原创 处理CSS文件 (7)
将css打包到js文件中，在js文件加载时，会创建一个style标签来生成样式。也就是说，css打包在js文件中，只有js文件全部加载完成时才会显示样式。可以开启CSS Module模式，但是如果直接修改会导致所有css后缀的loader混乱，所以需要处理一下。中的值向CSS规则添加供应商前缀，如果希望获取更大的兼容性，可以使用。也可以将postcss的配置提取出来，单独文件进行配置，比如创建。那么在webpack的配置中，只需要配置。在webpack的配置中，加入相关配置。即可，会自动读取根路径下的。
2024-12-25 09:30:00
206
原创 处理CSS文件之全局变量的引用 （8）
如果我们希望在scss的文件中引入，可以单独在scss文件中import。全局文件中，一定要注意代码格式，特别是分隔符，比如分号（；为了避免每次文件都需要import导入，可以直接使用。全局处理，自动的导入全局文件。
2024-12-25 05:45:00
318
原创 Webpack 开发与生产环境配置详解 (5)
但是，我们希望一方面 webpack 会生成 sourcemap 文件以提供给错误收集工具比如 sentry，另一方面又不会为 bundle 添加引用注释，以避免浏览器使用。我们在开发环境对 sourceMap 的要求是：快（eval），信息全（module），且由于此时代码未压缩，我们并不那么在意代码列信息(cheap),一般情况下，我们并不希望任何人都可以在浏览器直接看到我们未编译的源码，webpack的开发环境配置是单独的文件，因此我们需要合并。404页面跳转回index.html。
2024-12-24 07:00:00
728
原创 项目初始化与 Webpack 配置详解 （3）
通过这些步骤，你应该能够成功地初始化一个基于 Vue 3 和 TypeScript 的项目，并为其配置 Webpack 构建工具链。项目维护的时候,一般只会修改一部分代码,可以合理配置文件缓存,来提升前端加载页面速度和减少服务器压力,而。配置 TypeScript 编译选项，确保它能正确处理 Vue 和模块化代码。定义 Webpack 的入口文件和输出设置，包括清理旧的打包文件夹。为了自动生成 HTML 文件并注入打包后的资源，我们需要安装并配置。文件，这将作为项目的配置文件，记录依赖关系和其他元数据。
2024-12-23 11:15:00
1298
原创 Babel 配置详解 （4）
它将开发者依赖的全局内置对象等，抽取成单独的模块，并通过模块导入的方式引入，避免了对全局作用域的修改（污染）。会自动读取该预设，打包出来的箭头函数被转换为了普通函数，但是map函数依旧存在。在应用开发中，上述行为问题不大，基本可控。但如果在库、工具的开发中引入 polyfill，则会带来潜在的问题。我们也能将之前的typescript的预设，直接提取到babel的配置文件中。在没有配置babel预设之前，打包出来的箭头函数和map函数，依旧存在。，仅为每个文件添加其使用的polyfill，不需要手动导入。
2024-12-23 11:15:00
409
原创 Vue CLI 脚手架创建项目流程详解 （2）
通过上述步骤，你应该能够顺利创建并配置一个基于 Vue 3 和 TypeScript 的新项目。每个步骤都旨在帮助你根据项目的具体需求定制最合适的开发环境。
2024-12-22 21:16:35
1019
原创 前端脚手架技术精讲 (1)
通过本专栏的学习，您将获得关于前端脚手架技术的全面理解，涵盖从理论到实践的各个方面。无论您是初学者还是经验丰富的开发者，《前端脚手架技术内幕》都将为您提供宝贵的见解和实用技能，助力您的前端开发之旅。立即订阅，开启您的前端开发新篇章！
2024-12-22 21:05:23
1019
原创 企业级包管理器之搭建 monorepo 工程 （9)
考虑到 pnpm 内置了对 monorepo 的一个支持，搭建起来非常的简单快捷、门槛较低，所以我们选择采用 pnpm 的方案来搭建我们的工程。
2024-12-12 04:45:00
1702
原创 企业级包管理器之 monorepo&multirepo (8)
在企业级项目开发中，面对多个项目的管理，monorepo 和 multirepo 是两种常见的代码管理方案，它们各有特点与优劣，下面我们来详细了解一下。
2024-12-11 10:45:00
2611
原创 企业级包管理器之 yarn&pnpm (7)
在前端开发的包管理领域，npm 虽然应用广泛，但随着发展，yarn 和 pnpm 相继出现，它们各自针对 npm 当时存在的一些问题提供了有效的解决方案，下面我们就来深入了解一下它们。
2024-12-11 05:45:00
858
原创 企业级包管理器之搭建 npm 私有服务器 （6）
在企业级应用开发中，常常需要处理私有包的发布和管理。搭建 npm 私有服务器是一个理想的解决方案，它不仅能保证代码的私密性，还能提供更快的下载速度和更精细的权限设置。
2024-12-10 16:00:00
1570
原创 企业级包管理器之发布 npm 包 (5)
在前端开发中，将自己开发的包发布到 npm 上可以与更多开发者分享成果，同时也能提高开发效率。下面我们将详细介绍发布 npm 包的步骤。
2024-12-10 09:15:00
1278
原创 企业级包管理器之 npm 进阶指令 （3）
在前端开发的征程中，掌握 npm 的进阶指令能够让我们更加高效地管理项目依赖，提升开发效率。现在，让我们深入探索 npm 的进阶指令，为企业级前端开发增添强大的工具。
2024-12-09 08:00:00
2707
原创 企业级包管理器之包的说明文件 (4)
在前端开发中，包的说明文件（package.json）起着至关重要的作用。它就像是一个包的“身份证”，提供了关于包的各种关键信息，帮助开发者更好地管理和使用包。现在，让我们深入了解 package.json 的各个配置项。
2024-12-09 07:00:00
690
原创 企业级包管理器之 npm 回顾 （2）
究竟什么是包（package）呢？从软件工程的角度来看，包是一种组织代码结构的方式。通常，一个包提供一个功能，用于解决某一个特定问题。一般来说，一个包会将相关的所有目录和文件放置在一个独立的文件夹中，并通过一个特殊的文件（package.json）来描述这个包。此外，若要向 npm 发布包，必须要有 package.json 这个文件。
2024-12-08 19:25:11
1261
原创 企业级包管理器：专栏概述 （1）
在当今的前端开发领域，包管理器已经成为了每一位开发者不可或缺的工具。它们就像一个个神奇的工具箱，里面装满了各种各样的工具（即软件包），帮助我们快速搭建项目、实现功能，极大地提高了开发效率。接下来，让我们开启一段深入探索企业级包管理器的奇妙旅程吧。
2024-12-08 19:22:12
468
原创 Babel 自定义插件开发全攻略：从 AST 到插件实现 (7)
在 Babel 中创建自定义插件是一个强大的功能，它允许你对代码进行更深层次的控制和转换。以下是如何创建一个自定义插件的详细步骤，包括 AST、Babel 处理代码流程、遍历以及访问者模式。
2024-12-07 08:30:00
1031
原创 掌握 Babel 预设：官方预设与配置选项深度解析 (5)
Babel 的预设（presets）是一组插件的集合，用于简化配置过程。预设可以让你一次性启用一组相关的插件，从而减少配置的复杂性。
2024-12-06 10:00:00
1201
原创 Babel API 深度解析：编译、解析与配置加载(6)
Babel 提供了丰富的 API，主要位于包中。这些 API 可以帮助你在项目中进行代码转换、解析和配置加载等工作。
2024-12-06 09:30:00
1401
原创 自动化 JavaScript 编译：Babel CLI 高效使用指南(3)
注意在安装 @babel/cli 这个包的时候，需要同时安装 @babel/core 这个包，这个包是提供 babel 核心 API 的。Babel 提供了一个命令行工具（CLI），可以方便地在命令行中编译 JavaScript 代码。通过这些命令和配置，你可以灵活地使用 Babel CLI 来编译你的 JavaScript 项目。结尾的测试文件，并将其他非 JavaScript 文件原封不动地复制到。：将某些文件原封不动地复制到目标目录，不需要 Babel 进行编译。目录下的所有文件，并将结果输出到。
2024-12-05 11:00:00
922
原创 掌握 Babel 插件：运行顺序与选项传递技巧(4)
Babel 的插件机制允许你通过安装和配置特定的插件来扩展其功能，从而实现各种代码转换。之后在配置文件中进行插件配置即可。
2024-12-05 10:45:00
544
原创 掌握 Babel 配置：项目范围与文件相关配置全解析(2)
通过上述配置文件和选项，你可以灵活地控制 Babel 的行为，确保代码在不同环境中都能正常运行。
2024-12-04 09:45:00
686
原创 Babel 快速入门：现代 JavaScript 项目的必备编译器（1）
Babel 是一个 JavaScript 编译器，主要用于将最新的 JavaScript 代码转换为向后兼容的代码，以便在老版本的浏览器或环境中运行。它通过解析代码到抽象语法树（AST），然后将 AST 转换回 JavaScript 代码来实现这一功能。Babel 的核心功能是解析和转换代码，而具体的语法转换和功能添加则是通过各种插件和预设来实现的。
2024-12-04 06:00:00
824
原创 代码风格统一战：如何调和 ESLint 与 Prettier 的冲突（9）
Prettier 和 ESLint 都可以用来管理代码风格，但它们之间可能会存在规则冲突。例如，ESLint 可能配置为使用单引号，而 Prettier 可能配置为使用双引号。这种情况下，手动解决冲突会非常繁琐。幸运的是，有一些插件可以帮助我们自动解决这些冲突。
2024-12-03 09:30:00
848
原创 深入解析 ESLint 插件开发：打造个性化代码检查工具 (8)
自定义 ESLint 插件是扩展 ESLint 功能的一种方式，可以用来添加新的规则、配置或解析器。大多数插件都是以扩展规则为主，因此这些插件通常包含大量的自定义规则。
2024-12-03 08:00:00
1398
原创 扩展 ESLint 功能：探索插件的世界 (7)
ESLint 支持插件，这使得你可以通过自定义规则、配置、环境或处理器来扩展其功能。插件可以让你根据项目需求定制代码检查规则，并且可以方便地发布到 npm 上供他人使用。
2024-12-02 14:30:00
742
原创 代码质量守护者：ESLint Node.js API 深度解析 (6)
通过上述步骤，我们已经成功地使用 ESLint 的 Node.js API 创建了一个简单的 linter 工具。这个工具可以用来检查和修复代码，并且可以很容易地集成到其他项目中。
2024-12-02 12:00:00
324
原创 ESLint CLI 深度解析：配置选项与高效工作流（5）
通过上述选项，你可以灵活地控制 ESLint 的行为，从基本的文件检查到详细的规则配置，再到自动修复和性能优化。这些选项使得 ESLint 成为一个强大且高度可定制的工具，适用于各种不同的开发场景。
2024-12-01 19:47:33
1288
原创 ESLint v9.0.0 新纪元：探索 eslint.config.js 的奥秘 （4）
随着 ESLint 不断发展，新的配置选项和功能也会不断加入，因此建议定期查看官方文档以获取最新信息
2024-12-01 19:41:10
1502
1原创 开发者必备：构建自定义CLI格式化工具的完整指南 （5）
一个工具的命令行界面（CLI）背后其实就是调用相应的 API。在这里，我们将实现一个简易的 CLI 工具，通过它来格式化代码。
2024-11-28 23:53:19
321
原创 从 CLI 到 API：探索 Prettier 格式化的奥秘 （4）
用于格式化代码，接受源代码字符串和格式化选项作为参数。：用于检查代码是否已经格式化，返回布尔值。通过这些 API，你可以在 Node.js 环境中灵活地使用 Prettier 进行代码格式化和检查。
2024-11-26 23:41:43
549
原创 一篇文章读懂 Prettier CLI 命令：从基础到进阶 （3）
通过这些命令，你可以灵活地使用 Prettier 来格式化你的代码，确保代码风格的一致性和可读性。
2024-11-26 23:40:26
604
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人