前端工程化（三）

如何使用 Webpack 优化产出代码？

使用 Webpack 优化产出代码可以通过以下几种方式：

1. 压缩代码：在生产环境中，使用 UglifyJSPlugin 或 TerserPlugin 等插件对代码进行压缩，可以减少代码体积，提高加载速度。
2. 按需加载：使用动态 import 或 React.lazy 动态加载组件代码，可以实现按需加载，减少初始加载时间。
3. 提取公共模块：使用 SplitChunksPlugin 插件将公共模块提取出来，可以减少重复加载，提高性能。
4. 使用缓存：通过配置 output 的 filename 选项，使用 contenthash 将静态资源文件名与文件内容相关联，可以在文件内容变化时改变文件名，避免浏览器缓存问题。
5. 优化图片资源：使用 image-webpack-loader 或 url-loader 等插件对图片进行压缩和转换，可以减少图片体积，提升性能。

如何为项目创建 package.json 文件？

为项目创建 package.json 文件，可以使用以下两种方法：

1. 使用 npm init 命令：

   • 打开终端，导航到项目目录。
   • 运行 npm init 命令，回答一系列问题（如项目名称、版本、描述等），或使用 npm init -y 快速生成一个使用默认值的 package.json 文件。

2. 手动创建：

   • 在项目根目录下创建一个名为 package.json 的文件。
   • 填入基本的 JSON 结构，如项目名称、版本、描述、入口文件等。

什么是前端的 browserslist？它有什么作用？如何配置？

Browserslist 是一个开源项目，旨在帮助前端开发者共享目标浏览器和 Node.js 版本配置。它被广泛应用于各种前端工具，如 Autoprefixer、Stylelint 和 babel-preset-env 等。

作用：通过配置 Browserslist，开发者可以指定目标浏览器和 Node.js 版本，从而确保前端工具能够正确地处理这些特定环境下的兼容性问题。

配置方法：

1. 在项目的根目录下创建一个 .browserslistrc 文件，并添加目标浏览器和 Node.js 版本的配置。
2. 或者在 package.json 文件中添加 browserslist 配置项。

例如，在 .browserslistrc 文件中添加以下内容：

defaults and fully supports es6-module
maintained node versions

或者在 package.json 文件中添加：

{
  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ]
}

常见的图片处理加载器有哪些？

在 Webpack 中，常见的图片处理加载器有以下几种：

1. file-loader：将图片等文件作为一个文件输出并返回其公共 URI。
2. url-loader：类似于 file-loader，但可以将小于指定字节的图片转换为 DataURL，避免了额外的 HTTP 请求。
3. image-webpack-loader：压缩图片的 Webpack 加载器，可以减小图片的体积，提高网页加载速度。
4. svg-url-loader：将 SVG 文件转换为 DataURL，避免了额外的 HTTP 请求。
5. svg-sprite-loader：将多个 SVG 文件合并成一个 SVG sprite，减少 HTTP 请求，提高网页性能。
6. html-loader：可以将 HTML 中的图片资源引用转换为 Webpack 可以处理的模块引用，方便 Webpack 进行打包处理。

Webpack 中，pnpm 相比于其他的包管理工具有什么优势？

在 Webpack 项目中，pnpm 相比于 npm 和 yarn 等包管理工具具有以下优势：

1. 更快的安装和更新时间：pnpm 使用独特的方法来安装包，避免重复包，从而加快安装和更新速度。特别是当安装共享依赖的多个包时，pnpm 只会为每个依赖安装一次。
2. 更少的磁盘空间使用：由于 pnpm 避免了包重复，它使用的磁盘空间比 npm 和 yarn 更少。
3. 更好地支持 monorepos：pnpm 旨在与 monorepo 项目很好地配合使用，这些项目是在单个存储库中包含多个包或模块的项目。
4. 更好的对等依赖支持：pnpm 对对等依赖有更好的支持。
5. 更清晰的依赖树：pnpm 生成比 npm 和 yarn 更清晰的依赖树，这使得依赖树更容易理解和调试。

然而，值得注意的是，pnpm 可能在某些包或工具的兼容性方面存在问题，因此在选择包管理工具时需要根据项目需求进行权衡。

npm install 和 npm ci 有什么区别？

npm install 和 npm ci 都是 npm（Node Package Manager）提供的命令，用于安装项目依赖，但它们在使用场景和行为上有一些关键的区别：

1. 使用场景：

   • npm install：通常用于开发环境，当你需要安装一个新的包或者修改 package.json 和 package-lock.json 文件时使用。
   • npm ci：主要用于生产环境或持续集成（CI）系统中，它要求存在一个 package-lock.json 文件，并且会严格根据该文件安装依赖。

2. 行为差异：

   • npm install：在没有 package-lock.json 的情况下，会创建一个，并尝试安装最新满足版本范围的依赖。
   • npm ci：不会生成 package-lock.json，只会使用已有的。如果缺少 package-lock.json，npm ci 将会失败。
   • npm install：在遇到某些错误时可能不会完全失败，而是尝试继续安装其他包。
   • npm ci：在遇到任何错误时会立即停止安装过程，这有助于快速识别问题。
   • npm ci：默认情况下不会进行任何网络请求，除非明确需要（比如 package-lock.json 中缺少某些信息）。这使得它在没有网络连接的情况下也能工作。
   • npm install：在安装依赖时，会根据 package.json 中的版本范围解析依赖，并可能安装不同版本的依赖。
   • npm ci：严格按照 package-lock.json 中的依赖版本进行安装，不会重新解析依赖关系。

如何使用 Webpack 和 Localstorage 实现静态资源的离线缓存？

使用 Webpack 和 LocalStorage 实现静态资源的离线缓存，可以按照以下步骤进行：

1. 安装 Webpack 及其相关插件：确保项目中已经安装了 Webpack 及其必要的插件。
2. 配置 Webpack：将静态资源打包到特定目录，并安装 workbox-webpack-plugin 插件以生成离线缓存资源列表。
3. 配置 Service Worker：通过 Workbox 生成离线缓存资源列表，并在代码中监听资源加载事件。加载成功后，将资源存储到 LocalStorage 中。
4. 在页面加载时优先从 LocalStorage 中读取资源：如果资源存在，则直接使用；如果不存在，则从网络请求并更新到 LocalStorage 中。

什么是 webpack？它有什么作用？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。它将应用程序的各种资源（JavaScript、CSS、图片等）作为模块来处理，并根据模块的依赖关系进行打包和优化，从而生成适用于生产环境的代码。

作用：

1. 模块打包：将项目中的各个模块（如 JavaScript、CSS、图片等）打包成一个或多个文件，减少 HTTP 请求数量，提高加载速度。
2. 代码分割：通过按需加载（Code Splitting）和动态导入（Dynamic Import）等技术，将代码分割成多个小块，实现按需加载，减少初始加载时间。
3. 性能优化：通过压缩代码、提取公共模块、优化图片资源等技术，减少代码体积和加载时间，提高应用程序的性能。
4. 兼容性处理：使用 Babel 等工具对代码进行转译，使其能够在不同版本的浏览器和 Node.js 环境中运行。

如何在前端项目中实现多分支部署？

在前端项目中实现多分支部署，通常涉及版本控制和部署流程的管理。以下是一个基本的实现步骤：

1. 版本控制：使用 Git 等版本控制工具对项目进行版本控制，并为不同的分支（如开发分支、测试分支、生产分支等）创建相应的代码仓库或分支。
2. 构建和测试：在每个分支上进行构建和测试，确保代码的稳定性和正确性。可以使用 Webpack 等工具进行构建，并使用测试框架（如 Jest、Mocha 等）进行测试。
3. 部署：将构建后的代码部署到相应的服务器或平台上。可以使用自动化部署工具（如 Jenkins、Travis CI 等）来简化部署过程。

需要注意的是，多分支部署可能会增加项目管理的复杂性和维护成本。因此，在实施多分支部署时，需要根据项目的实际需求和团队的技术能力进行权衡和规划。

如何快速修复 npm 包的紧急 bug？

快速修复 npm 包的紧急 bug 通常涉及以下步骤：

1. 定位问题：首先，需要确定问题的来源和范围。可以通过查看错误日志、调试代码或使用测试框架来定位问题。
2. 修复代码：一旦定位到问题，就需要对代码进行修复。这可能涉及修改现有的代码、添加新的测试或修复依赖关系等问题。
3. 更新 npm 包：修复完代码后，需要更新 npm 包。这通常涉及更新 package.json 文件中的版本号，并运行 npm publish 命令将更新后的包发布到 npm 仓库中。
4. 通知用户：最后，需要通知使用该 npm 包的用户或团队，告知他们已修复紧急 bug，并建议他们更新到最新版本。

Babel 是如何将字符串解析成 AST 的? 它是如何进行词法和语法分析的?

Babel 将代码解析为 AST (抽象语法树) 的过程分为以下几个步骤：

1. 词法分析（Lexical Analysis）:

   • 将代码字符串拆解为词法单元（Tokens）。
   • 通过正则表达式或解析规则，提取关键字、标识符、操作符等基本构成。
   • Babel 使用的词法分析器是 @babel/parser，支持最新的 JavaScript 语法标准。

2. 语法分析（Syntax Analysis）:

   • 将词法单元组合为语法树结构。
   • 根据 ECMAScript 语言规范的语法规则生成抽象语法树 (AST)。
   • Babel 的语法分析器基于 Acorn 修改而来，解析结果符合 ESTree 规范。

在浏览器中如何使用原生 ESM 模块?

可以直接使用 <script> 标签并指定 type="module"，如下所示：

<script type="module">
  import { myFunction } from './myModule.js';
  myFunction();
</script>

特点：

• 浏览器会以模块方式加载 JavaScript 文件。
• 模块之间支持 import 和 export。
• 模块默认是严格模式 (strict mode)。
• 模块中的代码按需加载，支持延迟执行。

注意事项：

• 使用模块需要确保文件通过 HTTP/HTTPS 提供服务。
• 本地测试时需要启动一个本地开发服务器（如 http-server）。

Webpack 中的 Loader 和 Plugin 是什么? 二者有什么区别?

• Loader:

  • 用于转换模块的文件类型，类似文件的预处理器。
  • 通过指定规则（rules），处理特定类型的文件（如 .css 或 .jsx）。
  • 例如，css-loader 可以解析 CSS 文件，babel-loader 用于将现代 JavaScript 转译成 ES5。

• Plugin:

  • 用于扩展 Webpack 的功能，可以在整个构建周期中执行任务。
  • 例如，HtmlWebpackPlugin 用于生成 HTML 文件，DefinePlugin 用于定义全局变量。

区别:

• Loader 处理文件（转换资源类型），而 Plugin 扩展 Webpack 本身功能。
• Loader 在模块加载时工作，Plugin 在构建生命周期的特定阶段工作。

如何确认前端项目是否依赖某个特定依赖项?

1. 通过 package.json 文件:

   • 检查 dependencies 或 devDependencies 字段是否包含该依赖。

2. 使用命令行工具:

   npm ls <package-name>
   yarn list <package-name>
   

   如果显示依赖路径，则项目中包含该依赖。

3. 在代码中搜索:
   使用代码编辑器搜索该依赖的 import 或 require 引用。

合并、打包的原理是什么?请举例一个工具或插件

原理:

• 将多个模块的代码合并为一个或多个输出文件，减少 HTTP 请求数量。
• 分析模块依赖关系，按需加载所需资源。
• 插件会在打包过程中应用优化策略（如压缩、去重）。

示例: Webpack

• 将入口文件依赖的所有模块通过 require 或 import 引入。
• 通过内部模块图（Dependency Graph）记录模块之间的关系。
• 输出合并后的文件（bundle.js）。

JavaScript 压缩

原理:

• 删除无用代码（如注释、空格、未引用变量）。
• 重命名变量为更短的名字。
• 合并表达式，减少文件体积。

工具:

• Terser: 支持现代 JavaScript 的压缩工具。
• 使用 webpack 配合 terser-webpack-plugin 自动压缩代码。

前端开发中的 Live-Reload 自动刷新与 HMR 热模块替换有什么区别?

• Live-Reload 自动刷新:

  • 当文件发生变更时，重新加载整个页面。
  • 页面状态会丢失。

• HMR 热模块替换:

  • 仅替换变更的模块，不刷新页面。
  • 状态保持，例如组件的 UI 和应用状态。

HMR 通过 Webpack 的 webpack-dev-server 或 Vite 等工具实现。

什么是 AST? 它在前端的应用场景有哪些?

AST (抽象语法树) 是代码的结构化表示，包含语法成分及其层次关系。

应用场景:

1. 代码转译: 如 Babel 将现代 JavaScript 转译为兼容的版本。
2. 代码优化: 如 Terser 压缩代码。
3. 静态分析: 如 ESLint 检查代码规范。
4. 代码生成: 如 Webpack 打包模块代码。

Webpack 和 Rollup、Parcel 构建工具有什么区别? 各自的优缺点是什么?

特性	Webpack	Rollup	Parcel
目标	通用构建工具	专注于库构建	零配置快速构建
Tree-shaking	部分支持（依赖配置）	原生支持	原生支持
配置复杂度	高	中	低
适用场景	应用程序、复杂项目	库开发	快速开发、零配置场景
优点	功能强大，生态丰富	输出高效，支持 ES 模块	快速、支持多语言和自动优化
缺点	学习成本高	插件生态较弱	不够灵活，生态较弱

如何使用 Webpack 处理内联 CSS?

1. 安装相关 Loader：

   npm install style-loader css-loader --save-dev
   

2. 配置 Webpack：
   在 webpack.config.js 中添加规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
         },
       ],
     },
   };
   

效果:

• css-loader 解析 CSS 文件中的 @import 和 url()。
• style-loader 将 CSS 以 <style> 标签插入到 HTML 页面中。

• 如何使用 Webpack 配置前端脚手架？

使用 Webpack 配置前端脚手架的过程通常包括以下几个步骤：

1. 项目初始化：首先，需要初始化 package.json 文件，可以使用 pnpm init（或 npm init、yarn init，根据使用的包管理工具而定）来创建。然后，手动创建必要的目录和文件，如 src 目录、index.html 文件等。
2. 安装依赖：根据项目需求，安装 Webpack 及其 CLI 工具，以及其他必要的 loader 和插件。例如，对于 React 项目，需要安装 react、react-dom 及其类型定义，还需要安装 babel-loader、css-loader、style-loader、html-webpack-plugin 等。
3. 配置 Webpack：创建 Webpack 配置文件，如 webpack.base.ts（或 webpack.config.js），在其中设置入口文件、输出路径、loader 配置、插件配置等。对于不同的环境（开发、生产），可以创建不同的配置文件，如 webpack.dev.ts 和 webpack.prod.ts。
4. 编写入口文件：在 src 目录下创建入口文件，如 index.tsx（或 index.js），在其中编写应用程序的入口代码。
5. 运行 Webpack：在 package.json 文件中添加脚本命令，用于启动 Webpack 的开发服务器和构建生产环境代码。然后，可以使用这些命令来启动开发服务器或构建项目。

如何优化打包大小？

优化 Webpack 打包大小的方法有很多，以下是一些常见的策略：

1. 代码分离：使用 Webpack 的入口配置和 splitChunks 插件来实现代码分离，减少单个包的大小。
2. 动态导入：通过模块的内联函数调用来分离代码，实现按需加载。
3. 压缩代码：使用 TerserPlugin 等插件来压缩 JavaScript 代码，减少体积。对于 CSS，可以使用 css-minimizer-webpack-plugin 或其他 CSS 压缩工具。
4. 提取 CSS：使用 mini-css-extract-plugin 插件将 CSS 提取到单独的文件中，以减少 JavaScript 包的大小。
5. 优化图片和字体：使用 image-webpack-loader、svgo-loader 等插件来优化图片和字体文件的大小。
6. 使用 CDN：将静态资源（如库文件、图片等）托管到 CDN 上，以减少本地服务器的压力和加快资源加载速度。

Grunt 和 Gulp 的工作方式是怎样的？

Grunt 和 Gulp 都是 JavaScript 的任务运行器，用于自动化处理诸如文件压缩、图片优化、代码编译等重复性的任务。它们的工作方式存在一些差异：

• Grunt：基于配置式工作流。开发者需要在 Gruntfile.js 配置文件中声明需要执行的任务和这些任务的配置选项。每个任务可能会有一个或多个目标，每个目标又具有特定的配置。Grunt 根据这些配置执行任务。它使用大量的插件来执行不同的任务，并通过文件间的映射关系来指定源文件和目标文件的路径。
• Gulp：基于代码式工作流。开发者通过编写代码来定义任务的执行流程。Gulp 使用 Node.js 的流（stream）来读取、修改并输出文件，这使得文件处理过程中可以不写入磁盘，直接在内存中完成，从而提高了执行效率。Gulp 通过 .pipe() 方法将多个任务连接起来，形成一个处理链。

如何查看前端项目应该使用的 Node.js 版本？

查看前端项目应该使用的 Node.js 版本的方法有很多，以下是一些常见的方法：

1. 查看 package.json 文件：在项目的 package.json 文件中，可以找到一个名为 engines 的字段，它会列出项目所依赖的 Node.js 版本。例如，"engines": { "node": ">=12.0.0" } 表示该项目需要 Node.js 版本大于等于 12.0.0 才能正常运行。
2. 使用终端命令：在项目的根目录下，打开终端或命令提示符，并输入 node -v 命令。执行该命令后，终端会返回当前安装的 Node.js 版本。如果项目中已经指定了兼容的 Node.js 版本，可以确保安装的版本与之兼容。
3. 查看依赖包的 Node.js 版本要求：有时候，项目中的某些依赖包可能对 Node.js 版本有特定的要求。可以通过查看这些依赖包的 package.json 文件或文档来了解这些信息。

如何使用 Webpack 进行前端性能优化？

使用 Webpack 进行前端性能优化的方法有很多，以下是一些常见的策略：

1. 代码分离：如上所述，通过代码分离可以减少单个包的大小，提高加载速度。
2. 预加载和预获取：使用 Webpack 的 preload 和 prefetch 功能来优化资源的加载顺序。preload 会以高优先级预加载资源，而 prefetch 则会在浏览器空闲时预获取资源。
3. 使用 CDN：如上所述，将静态资源托管到 CDN 上可以加快资源加载速度。
4. 缓存：通过配置 Webpack 的输出文件名和哈希值来实现浏览器缓存。当文件内容发生变化时，哈希值会改变，从而触发浏览器重新加载新文件。
5. 优化打包配置：通过合理配置 Webpack 的打包选项，如 optimization.splitChunks、optimization.runtimeChunk 等，来优化打包结果。
6. 使用 Tree Shaking：Tree Shaking 是一种消除未使用代码的技术。Webpack 内置了对 Tree Shaking 的支持，可以通过配置来实现。

什么是前端脚手架？它有什么作用？

前端脚手架（Scaffold）是一种用于快速搭建项目结构的工具，在 Web 前端开发中得到广泛应用。它提供了一种标准的项目结构和开发的规范，可以帮助团队在短时间内搭建起一个良好的基础框架。前端脚手架的作用包括：

1. 项目结构自动生成：根据约定好的项目结构模板自动生成初始的项目文件和目录结构，减少手动创建和配置项目结构的时间。
2. 依赖管理和模块打包：集成包管理工具（如 npm、yarn）来管理项目的依赖包，并提供模块打包功能，将各个模块的代码进行打包，减少网络请求，提高页面加载速度。
3. 开发规范和工具集成：集成各种开发规范和工具，如代码规范检查工具、单元测试工具、自动化构建工具等，帮助开发者规范代码书写、提高代码质量和可维护性。
4. 快速开发和部署：提供快速开发的脚本命令和快速部署的功能，帮助开发者将项目发布到线上环境。

Vite 和 Webpack 在热更新上有什么区别？

Vite 和 Webpack 在热更新上存在一些显著的区别：

• Webpack：需要通过配置项开启热更新功能。在大型项目中，由于需要对整个应用或大部分应用进行打包，热更新过程可能会比较耗时。
• Vite：默认支持热更新和自动刷新功能。它利用现代浏览器支持的 ES 模块特性，只构建正在编辑的文件，从而极大地缩短了启动时间和热更新时间。当模块内容改变时，Vite 直接向浏览器重新请求该模块，而不需要重新编译整个文件，这使得开发过程更加高效。

总的来说，Vite 在热更新方面相比 Webpack 具有更快的速度和更高的效率。

微前端技术主要解决了哪些问题?适用于什么场景?

解决的问题:

1. 团队协作:

   • 不同团队可以独立开发、部署和维护自己的模块。
   • 避免大团队协作的冲突，促进解耦。

2. 技术栈兼容:

   • 支持多个技术栈并存，不同子应用可以使用 React、Vue 等技术。

3. 代码隔离和加载:

   • 解决多应用之间的样式、JS 冲突问题。
   • 按需加载子应用，提高首屏性能。

4. 渐进式迁移:

   • 在不重写整个系统的情况下，逐步重构或升级部分功能模块。

适用场景:

• 大型复杂项目: 如多个业务线的管理后台或电商平台。
• 团队自治开发: 独立开发团队负责不同功能模块。
• 渐进式重构: 从老旧的单体应用逐步迁移到现代架构。

如何使用 Webpack 解决开发环境中的跨域问题?

方法: 使用 devServer.proxy 配置代理。

步骤:

1. 配置 Webpack 的 devServer：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://backend-server.com',
           changeOrigin: true,
           pathRewrite: { '^/api': '' },
         },
       },
     },
   };
   

2. 解释:

   • /api 为请求的前缀，WebPack 开发服务器会将其代理到 http://backend-server.com。
   • changeOrigin: true 避免跨域问题。
   • pathRewrite 用于去掉前缀 /api。

3. 启动开发服务器，跨域问题自动解决。

前端开发中如何优化网络请求和资源加载?具体怎么实现?

1. 减少网络请求数量:

   • 合并 CSS、JS 文件。
   • 使用图片 Sprite 技术。
   • 使用 HTTP/2 多路复用。

2. 使用缓存:

   • 配置强缓存（Cache-Control）。
   • 使用文件名哈希（如 [contenthash]）实现缓存失效。

3. 异步加载资源:

   • 懒加载图片和组件（lazy-loading）。
   • 使用动态 import() 按需加载。

4. 压缩和优化:

   • 压缩 CSS、JS 和图片。
   • 使用工具如 Terser、ImageMin。

5. 服务端优化:

   • 配置 CDN 提高资源加载速度。
   • 使用服务端渲染 (SSR)。

6. 代码拆分:

   • Webpack 的 SplitChunksPlugin 分割代码。

如何快速搭建前端开发环境并启动项目?

1. 初始化项目:

   mkdir my-project
   cd my-project
   npm init -y
   

2. 安装开发依赖:

   npm install webpack webpack-cli webpack-dev-server --save-dev
   npm install html-webpack-plugin --save-dev
   

3. 创建必要文件:

   • src/index.js：入口文件。
   • public/index.html：HTML 模板文件。

4. 配置 Webpack:

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './public/index.html',
       }),
     ],
     devServer: {
       port: 8080,
       open: true,
     },
   };
   

5. 启动开发服务器:

   npx webpack-dev-server
   

常见的前端模块化方案有哪些?请举例说明

1. CommonJS:

   • 用于 Node.js 环境，模块通过 require 和 module.exports 引入和导出。
   • 示例：

     // 导出
     module.exports = { name: 'CommonJS' };
     // 导入
     const module = require('./module');
     

2. ES Modules (ESM):

   • 浏览器和现代 JavaScript 支持，使用 import 和 export。
   • 示例：

     // 导出
     export const name = 'ESM';
     // 导入
     import { name } from './module.js';
     

3. AMD (Asynchronous Module Definition):

   • 用于浏览器异步加载模块，RequireJS 是典型实现。
   • 示例：

     define(['dependency'], function (dep) {
       return { name: 'AMD' };
     });
     

4. UMD (Universal Module Definition):

   • 兼容 AMD、CommonJS 和全局变量。
   • 示例：

     (function (root, factory) {
       if (typeof module === 'object' && module.exports) {
         module.exports = factory();
       } else {
         root.module = factory();
       }
     })(this, function () {
       return { name: 'UMD' };
     });
     

如何将前端项目的 CommonJS 模块转化为 ESM 模块?

1. 使用 Babel 转译：

   • 配置 .babelrc：

     {
       "presets": ["@babel/preset-env"]
     }
     

   • 安装依赖：

     npm install @babel/core @babel/preset-env --save-dev
     

   • 转换后可生成 ESM 格式代码。

2. 手动替换 require 和 module.exports：

   • 将 require 替换为 import。
   • 将 module.exports 替换为 export 或 export default。

npm publish 时，npm script 的生命周期是什么?

1. prepublishOnly:

   • 在 npm publish 之前运行（仅发布时触发）。
   • 可用于代码打包或验证。

2. prepare:

   • 在 prepublishOnly 之前运行。
   • 安装依赖时触发，可用于生成构建文件。

3. postpublish:

   • 在发布完成后运行。
   • 可用于通知发布成功。

如何使用 webpack-dev-server 监控文件编译?

1. 配置 Webpack:
   在 webpack.config.js 中启用监控：

   devServer: {
     watchFiles: ['src/**/*'],
   },
   

2. 自动刷新:
   修改文件后，浏览器会自动刷新页面。

3. 启动开发服务器:

   npx webpack-dev-server
   

什么是 semver?有哪些常见的版本号范围表示方法?

Semver (Semantic Versioning) 是语义化版本号，格式为 MAJOR.MINOR.PATCH：

• MAJOR: 不兼容的更改。
• MINOR: 向后兼容的新功能。
• PATCH: 向后兼容的错误修复。

版本号范围表示方法:

• ^1.2.3: 允许更新到 1.x.x。
• ~1.2.3: 允许更新到 1.2.x。
• >=1.0.0 <2.0.0: 允许从 1.0.0 到 2.0.0。

启动前端服务后，如何确定该服务对应的端口号?

1. 查看配置:
   检查 Webpack 或其他工具的配置文件（如 port 字段）。

2. 命令行输出:
   启动服务时，工具会在控制台输出端口号。

3. 默认端口:

   • webpack-dev-server 默认为 8080。
   • 可以通过 URL http://localhost:<port> 验证。

Babel 编译为低版本 ES 时，为什么能编译语法但无法编译 API?

• 语法转换:

  • Babel 通过插件（如 @babel/plugin-transform-arrow-functions）将新语法（如箭头函数）转换为低版本语法。
  • 这是静态的语法层级转译。

• API 转换:

  • 新 API（如 Promise、Map）属于运行时功能，Babel 无法静态转译。
  • 需要通过 polyfill（如 core-js）来模拟旧环境支持这些 API。

原文地址：https://blog.csdn.net/m0_55049655/article/details/144409660

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！