工程化分类面试题

最新推荐文章于 2024-05-13 19:18:44 发布
最新推荐文章于 2024-05-13 19:18:44 发布
阅读量388 收藏
点赞数 2
分类专栏： 前端面试题 文章标签： javascript 前端 开发语言 工程化 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46262422/article/details/126175759
版权

CommonJS

关键词：

  • 社区标准
  • 使用函数实现
  • 仅node环境支持
  • 动态依赖（需要代码运行后才能确定依赖）
  • 动态依赖是同步执行的

原理：

// require函数的伪代码
function require(path){
  if(该模块有缓存吗){
    return 缓存结果;
  }
  function _run(exports, require, module, __filename, __dirname){
    // 模块代码会放到这里
  }
  
  var module = {
    exports: {}
  }
  
  _run.call(
    module.exports, 
    module.exports, 
    require, 
    module, 
    模块路径, 
    模块所在目录
  );
  
  把 module.exports 加入到缓存;
  return module.exports;
}

ES Module

关键词：

  • 官方标准

  • 使用新语法实现

  • 所有环境均支持

  • 同时支持静态依赖和动态依赖

    静态依赖：在代码运行前就要确定依赖关系

  • 动态依赖是异步的

  • 符号绑定

关于符号绑定：

// module a.js
export var a = 1;
export function changeA(){
  a = 2;
}

// index.js
// 导入位置的符号和导出的符号并非赋值，它们完全是一个东西
import {a, changeA} from './a.js';
console.log(a); // 1
changeA();
console.log(a); // 2

面试题

  1. commonjs 和 es6 模块的区别是什么？

    参考答案：

    1. CMJ 是社区标准，ESM 是官方标准
    2. CMJ 是使用 API 实现的模块化，ESM 是使用新语法实现的模块化
    3. CMJ 仅在 node 环境中支持，ESM 各种环境均支持
    4. CMJ 是动态的依赖，同步执行。ESM 既支持动态，也支持静态，动态依赖是异步执行的。
    5. ESM 导入时有符号绑定，CMJ 只是普通函数调用和赋值

  2. export 和 export default 的区别是什么？

    参考答案：

    export 为普通导出，又叫做具名导出，顾名思义，它导出的数据必须带有命名，比如变量定义、函数定义这种带有命名的语句。在导出的模块对象中，命名即为模块对象的属性名。在一个模块中可以有多个具名导出

    export default 为默认导出，在模块对象中名称固定为 default，因此无须命名，通常导出一个表达式或字面量。在一个模块中只能有一个默认导出。

  3. 下面的模块导出了什么结果？

    exports.a = 'a';
module.exports.b = 'b';
this.c = 'c';
module.exports = {
  d: 'd'
}

    参考答案：

    { d: 'd' }

  4. 下面的代码输入什么结果？

    // module counter
var count = 1;
export {count}
export function increase(){
  count++;
}

// module main
import { count, increase } from './counter';
import * as counter from './counter';
const { count: c } = counter;
increase();
console.log(count);
console.log(counter.count);
console.log(c);

运行本地命令

使用npx 命令时，它会首先从本地工程的node_modules/.bin目录中寻找是否有对应的命令

例如：

npx webpack

上面这条命令寻找本地工程的node_modules/.bin/webpack

如果将命令配置到package.json的scripts中，可以省略npx

临时下载执行

当执行某个命令时，如果无法从本地工程中找到对应命令，则会把命令对应的包下载到一个临时目录，下载完成后执行，临时目录中的命令会在适当的时候删除

例如：

npx prettyjson 1.json

npx会下载prettyjson包到临时目录，然后运行该命令

如果命令名称和需要下载的包名不一致时，可以手动指定报名

例如@vue/cli是包名，vue是命令名，两者不一致，可以使用下面的命令

npx -p @vue/cli vue create vue-app

npm init

npm init通常用于初始化工程的package.json文件

除此之外，有时也可以充当npx的作用

npm init 包名 # 等效于 npx create-包名
npm init @命名空间 # 等效于 npx @命名空间/create
npm init @命名空间/包名 # 等效于 npx @命名空间/create-包名

ESLint官网：https://eslint.org/

ESLint民间中文网：https://eslint.bootcss.com/

ESLint的由来

JavaScript是一个过于灵活的语言，因此在企业开发中，往往会遇到下面两个问题：

  • 如何让所有员工书写高质量的代码？

    比如使用===替代==

  • 如何让所有员工书写的代码风格保持统一？

    比如字符串统一使用单引号

上面两个问题，一个代表着代码的质量，一个代表着代码的风格。

如果纯依靠人工进行检查，不仅费时费力，而且还容易出错。

ESLint由此诞生，它是一个工具，预先配置好各种规则，通过这些规则来自动化的验证代码，甚至自动修复

ESLint的基本使用

安装

npm i -D eslint

如何验证

# 验证单个文件
npx eslint 文件名
# 验证全部文件
npx eslint src/**

配置规则

eslint会自动寻找根目录中的配置文件，它支持三种配置文件：

  • .eslintrc JSON格式
  • .eslintrc.js JS格式
  • .eslintrc.yml YAML格式

这里以.eslintrc.js为例：

// ESLint 配置
module.exports = {
  // 配置规则
  rules: {
    规则名1: 级别,
    规则名2: 级别,
    ...
  },
};

每条规则由名称和级别组成

规则名称决定了要检查什么

规则级别决定了检查没通过时的处理方式

所有的规则名称看这里：

  • 官方：https://eslint.org/docs/rules/
  • 中文：https://eslint.bootcss.com/docs/rules/

所有级别如下：

  • 0 或 ‘off’：关闭规则
  • 1 或 ‘warn’：验证不通过提出警告
  • 2 或 ‘error’：验证不通过报错，退出程序

在VSCode中及时发现问题

每次都要输入命令发现问题非常麻烦

可以安装VSCode插件ESLint，只要项目的node_modules中有eslint，它就会按照项目根目录下的规则自动检测

使用继承

ESLint的规则非常庞大，全部自定义过于麻烦

一般我们继承其他企业开源的方案来简化配置

这方面做的比较好的是一家叫Airbnb的公司，他们在开发前端项目的时候自定义了一套开源规则，受到全世界的认可

我们只需要安装它即可

# 为了避免版本问题，不要直接安装eslint，直接安装下面的包，会自动安装相应版本的eslint
npm i -D eslint-config-airbnb

然后稍作配置

module.exports = {
	extends: 'airbnb' # 配置继承自 airbnb
}

在框架中使用

一般我们使用脚手架搭建工程，在搭建工程时通常都可以直接设置eslint

企业开发的实际情况

我们要做什么？

  • 安装好VSCode的ESLint插件
  • 学会查看ESLint错误提示

关于webpack的诸多问题

为什么要学习webpack？

前端有很多打包工具，其中，webpack生态最完整、使用最广泛。

学习webpack的意义主要有以下几点：

  1. 理解前端开发中出现的常见问题，以及对应的解决办法
  2. 帮助理解常见的脚手架，如vue-cli、create-react-app、umi-js等
  3. 可以脱离脚手架搭建工程，甚至自己完成脚手架开发
  4. 应对工程化方面的进阶面试题

webpack学习哪个版本？

截止到2022-01-04，webpack的版本是webpack5，但目前使用的最广泛的是webpack4。

webpack的版本会不断更新，但它的核心原理是不变的，因此，学习webpack4成为了最好的选择。

如何学习webpack？

需要完整的学习课程「webpack详细版」

学习过程中，把重心放在第一章「Webpack核心功能」和第五章「性能优化」。

webpack scope hoisting

详细介绍：https://webpack.docschina.org/plugins/module-concatenation-plugin/

面试题

介绍一下 webpack scope hoisting？

参考答案：

scope hoisting 是 webpack 的内置优化，它是针对模块的优化，在生产环境打包时会自动开启。

在未开启scope hoisting时，webpack 会将每个模块的代码放置在一个独立的函数环境中，这样是为了保证模块的作用域互不干扰。

而 scope hoisting 的作用恰恰相反，是把多个模块的代码合并到一个函数环境中执行。在这一过程中，webpack 会按照顺序正确的合并模块代码，同时对涉及的标识符做适当处理以避免重名。

这样做的好处是减少了函数调用，对运行效率有一定提升，同时也降低了打包体积。

但 scope hoisting 的启用是有前提的，如果遇到某些模块多次被其他模块引用，或者使用了动态导入的模块，或者是非 ESM 的模块，都不会有 scope hoisting。

清除输出目录

webpack5清除输出目录开箱可用，无须安装clean-webpack-plugin，具体做法如下：

module.exports = {
  output: {
    clean: true
  }
}

top-level-await

webpack5现在允许在模块的顶级代码中直接使用await

// src/index.js
const resp = await fetch("http://www.baidu.com");
const jsonBody = await resp.json();
export default jsonBody;

目前，top-level-await还未成为正式标准，因此，对于webpack5而言，该功能是作为experiments发布的，需要在webpack.config.js中配置开启

// webpack.config.js
module.exports = {
  experiments: {
    topLevelAwait: true,
  },
};

打包体积优化

webpack5对模块的合并、作用域提升、tree shaking等处理更加智能

打包缓存开箱即用

在webpack4中，需要使用cache-loader缓存打包结果以优化之后的打包性能

而在webpack5中，默认就已经开启了打包缓存，无须再安装cache-loader

默认情况下，webpack5是将模块的打包结果缓存到内存中，可以通过cache配置进行更改

const path = require("path");

module.exports = {
  cache: {
    // 缓存类型，支持：memory、filesystem
    type: "filesystem", 
    // 缓存目录，仅类型为 filesystem 有效
    cacheDirectory: path.resolve(__dirname, "node_modules/.cache/webpack"), 
  },
};

关于cache的更多配置参考：https://webpack.docschina.org/configuration/other-options/#cache

资源模块

在webpack4中，针对资源型文件我们通常使用file-loader、url-loader、raw-loader进行处理

由于大部分前端项目都会用到资源型文件，因此webpack5原生支持了资源型模块

详见：https://webpack.docschina.org/guides/asset-modules/

解释一下 npm 模块安装机制是什么？

参考答案：

  1. npm 会检查本地的 node_modules 目录中是否已经安装过该模块，如果已经安装，则不再重新安装
  2. npm 检查缓存中是否有相同的模块，如果有，直接从缓存中读取安装
  3. 如果本地和缓存中均不存在，npm 会从 registry 指定的地址下载安装包，然后将其写入到本地的 node_modules 目录中，同时缓存起来。

npm 缓存相关命令：

# 清除缓存
npm cache clean -f

# 获取缓存位置
npm config get cache

# 设置缓存位置
npm config set cache "新的缓存路径"

模块联邦

在大型项目中，往往会把项目中的某个区域或功能模块作为单独的项目开发，最终形成「微前端」架构

在微前端架构中，不同的工程可能出现下面的场景

image-20210122172549530

这涉及到很多非常棘手的问题：

  • 如何避免公共模块重复打包
  • 如何将某个项目中一部分模块分享出去，同时还要避免重复打包
  • 如何管理依赖的不同版本
  • 如何更新模块
  • ......

webpack5尝试着通过模块联邦来解决此类问题

示例

现有两个微前端工程，它们各自独立开发、测试、部署，但它们有一些相同的公共模块，并有一些自己的模块需要分享给其他工程使用，同时又要引入其他工程的模块。

初始化工程

home项目

安装

# 初始化 package.json
npm init -y 

# 安装依赖
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i jquery

修改package.json

"scripts": {
   "build": "webpack",
   "dev": "webpack serve"
 }

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 8080,
  },
  output: {
    clean: true,
  },
  plugins: [ new HtmlWebpackPlugin() ]
};

代码

// src/now.js

import $ from 'jquery';

export default function (container) {
  const p = $('<p>').appendTo(container).text(new Date().toLocaleString());
  setInterval(function () {
    p.text(new Date().toLocaleString());
  }, 1000);
}

// src/bootstrap.js
import $ from 'jquery';
import now from './now';

// 生成首页标题
$('<h1>').text('首页').appendTo(document.body);

// 首页中有一个显示当前时间的区域
now($('<div>').appendTo(document.body));

// src/index.js
import('./bootstrap')
active项目

安装

# 初始化 package.json
npm init -y 

# 安装依赖
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i jquery

修改package.json

"scripts": {
   "build": "webpack",
   "dev": "webpack serve"
 }

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 3000,
  },
  output: {
    clean: true,
  },
  plugins: [ new HtmlWebpackPlugin() ]
};

代码

// src/news.js

import $ from 'jquery';

export default function (container) {
  const ul = $('<ul>').appendTo(container);
  let html = '';
  for (var i = 1; i <= 20; i++) {
    html += `<li>新闻${i}</li>`;
  }
  ul.html(html);
}


// src/bootstrap.js
import $ from 'jquery';
import news from './news';

// 生成活动页标题
$('<h1>').text('活动页').appendTo(document.body);

// 活动页中有一个新闻列表
news($('<div>').appendTo(document.body));

// src/index.js
import('./bootstrap')

暴露和引用模块

active项目需要使用home项目的now模块

home项目暴露now模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 模块联邦的名称
      // 该名称将成为一个全部变量，通过该变量将可获取当前联邦的所有暴露模块
      name: 'home',
      // 模块联邦生成的文件名，全部变量将置入到该文件中
      filename: 'home-entry.js',
      // 模块联邦暴露的所有模块
      exposes: {
        // key：相对于模块联邦的路径
        // 这里的 ./now 将决定该模块的访问路径为 home/now
        // value: 模块的具体路径
        './now': './src/now.js',
      },
    }),
  ],
};

active项目引入now模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 远程使用其他项目暴露的模块
      remotes: {
        // key: 自定义远程暴露的联邦名
        // 比如为 abc， 则之后引用该联邦的模块则使用 import "abc/模块名"
        // value: 模块联邦名@模块联邦访问地址
        // 远程访问时，将从下面的地址加载
        home: 'home@http://localhost:8080/home-entry.js',
      },
    }),
  ],
};

// src/bootstrap.js
// 远程引入时间模块
import now from 'home/now'
now($('<div>').appendTo(document.body));
home项目需要使用active项目的news模块

active项目暴露news模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 模块联邦的名称
      // 该名称将成为一个全部变量，通过该变量将可获取当前联邦的所有暴露模块
      name: 'active',
      // 模块联邦生成的文件名，全部变量将置入到该文件中
      filename: 'active-entry.js',
      // 模块联邦暴露的所有模块
      exposes: {
        // key：相对于模块联邦的路径
        // 这里的 ./news 将决定该模块的访问路径为 active/news
        // value: 模块的具体路径
        './news': './src/news.js',
      },
    }),
  ],
};

home项目引入news模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 远程使用其他项目暴露的模块
      remotes: {
        // key: 自定义远程暴露的联邦名
        // 比如为 abc， 则之后引用该联邦的模块则使用 import "abc/模块名"
        // value: 模块联邦名@模块联邦访问地址
        // 远程访问时，将从下面的地址加载
        active: 'active@http://localhost:3000/active-entry.js',
      }
    }),
  ],
};

// src/bootstrap.js
// 远程引入新闻模块
import news from 'active/news'
news($('<div>').appendTo(document.body));

处理共享模块

两个项目均使用了jquery，为了避免重复，可以同时为双方使用shared配置共享模块

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 配置共享模块
      shared: {
        // jquery为共享模块
        jquery: {
          singleton: true, // 全局唯一
        },
      },
    }),
  ],
};
狡辉两门
关注
专栏目录
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
vue3打包踩坑记录 ERROR: Top-level await is not available in the configured target environment (“es2015“)
weixin_39277183的博客
06-09 1998
因为做动态配置IP及端口，打包后随时改随时生效 ,代码使用了let baseURL = await axios.get(‘./config.json’);我也是参照了网上其他博主的方法，这里只是做个人项目踩坑记录。2、vite.config.js配置。
在Vue中使用顶级await，打包出现报错的解决方案
weixin_65478269的博客
03-31 5705
【代码】在Vue中使用顶级await，打包出现报错的解决方案。
Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
yangxinxiang84的专栏
04-13 4474
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误（能正常编译），错误提示是： Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set t
如何在顶层使用await 【top level await】
秋天，黄叶坠地，凉风有信。
11-08 2725
仅当 “module” 选项设置为 “es2022”、“esnext”、“system”、“node16” 或 “nodenext”，且 “target” 选项设置为 “es2017” 或更高版本时，才允许使用顶级 “await” 表达式。添加type为module。如何在顶层使用await 【top level await】
Webpack5 新特性业务落地实战(2)，2024年最新高级前端工程师面试题
2401_84140332的博客
04-11 974
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。
前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题
10-14
5. **工程化面试题**：这部分可能包括模块打包工具（如Webpack, Rollup），构建流程，代码版本控制（Git），测试框架（Jest, Mocha），持续集成/持续部署(CI/CD)，性能优化，代码风格约定（如ESLint）等。...
前端面试小册，包含Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题
08-02
1. **Vue面试题**：可能涵盖Vue的响应式系统、组件化开发、生命周期、Vuex状态管理、Vue Router路由管理等内容。 2. **React面试题**：React的核心概念如虚拟DOM、JSX、组件生命周期、状态管理和Props、Redux或...
web-interview:语音打卡社群维护的前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题，高频面试题
04-12
本仓库为语音打卡社群(JS每日一题)维护的前端面试题库，包含不限于Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题，高频面试题 同时我们提供更好阅读体验的在线...
前端面试题库 Vue，React，JS面试题，HTTP，工程化，CSS，算法面试题，大厂面试题，高频面试题
02-21
5. **工程化**：这部分通常包括模块化与打包工具（如Webpack、Rollup）、构建流程、代码规范（ESLint、Prettier）、自动化测试（Jest、Mocha）、持续集成/持续部署（CI/CD）等。 6. **CSS**：CSS面试题可能涵盖盒...
vue.config.js文件获取异步数据
weixin_44258964的博客
04-22 1572
vue.config.js文件获取异步数据
【JS技巧】使用顶层 await 简化 JS 代码
小钿钿不忘初心的博客
03-29 5706
前言 JavaScript 是一种流行的编程语言，最初被设计为单线程和同步的语言，意味着程序需要在不等待获取外部资源或者耗时的计算的情况下一步一步的运行。如果脚本需要这样的资源或计算，这种同步行为将导致错误。这会阻塞队列中的所有其他进程运行，无论它们是否依赖于那些阻塞中的任务。 但很久以前，JavaScript 引入了一个机制让其可以在等待外部资源或者耗时任务的时候去执行其剩余的代码。这种异步行为是通过在函数上使用回调或 promise 来实现的。 什么是回调和promise 我将通过代码来解释这些概念。如
vue.config.js配置及axios
m0_52374678的博客
04-19 2034
后端给你域名或者ip了，让你配置 配置vue.config.js 1、在自己项目根目录下新建文件vue.config.js，将下面代码copy进去 vue.config.js module.exports = { publicPath: './', //跨域代理 devServer: { host: '192.168.42.89', //这是我本机ip地址 // 自定义域名，需要在hosts文件里配置 port: 8080, open: true,
VUE中vue.config.js配置
qq_46344419的博客
08-16 412
VUE中vue.config.js配置
配置vue3.0 + ts + axios + 反向代理 + px转rem
ZQmxy的博客
04-21 2402
前提 你需要安装好vue-cli脚手架 注意：该文章只针对与vue-cli版本为4.5.13 查看自己vue版本 vue -V 搭建vue3.0 创建一个项目文件夹，cmd打开该文件夹，输入vue create . 回车 注意：create后面有 点 vue create . 敲 y 然后回车 按上下键进行选择，选择最后一个，回车 按上下键进行选择，按空格选中，按需选择，选择好后回车 选择vue版本 选择3.x ，回车 这里三次全部按 n ，回车 选择css预处理器
2024年前端最新Webpack5 新特性业务落地实战(3)，2024年最新腾讯前端面试流程
2301_82243710的博客
05-13 922
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心…,cache: {// 可选配置config: [__filename], // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效},name: ‘’, // 配置以name为隔离，创建不同的缓存文件，如生成PC或mobile不同的配置缓存…,},生产环境下默认的缓存存放目录在。
Webpack5 新特性业务落地实战(1)，神级Web前端进阶笔记
2401_84140332的博客
04-11 964
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
第十七章 webpack5项目搭建Vue-Cli（开发模式）
天界程序员的博客
12-21 752
我们这里的webpack.dev.js采用复用react-cli的开发模式的配置进行改造。4、使用vue-style-loader替换style-loader。2、注册VueLoaderPlugin插件。创建一个目录用来搭建vue-cli的项目。3、添加vue文件的loader配置。这里我们在封装的函数里面替换即可。新增vue文件的扩展名。初始化项目，生成一个。
vite2 打包报 Top-level await is not available in the configured target environment ...
暴走的山交君的博客
11-10 4288
在用vite2 + vue3 + elementplus开发时，vite2 打包报了一个错： Top-level await is not available in the configured target environment (“chrome87”, “edge88”, “es2019”, “firefox78”, “safari13.1”)
前端工程化vue 面试题
最新发布
09-01
前端工程化面试中关于Vue的相关问题可能会涉及以下几个方面： 1. Vue的核心概念：面试者会询问你对Vue的理解，包括它是怎样的框架、MVVM模式的工作原理以及组件化开发的重要性。 2. Vue生命周期钩子：了解你在项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狡辉两门

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值