webpack+vite前端构建工具 - 3webpack处理js

3 webpack处理js

  • webpack的核心——处理js文件，将模块化的代码打包。
  • 具体操作如下
    • es6转化（为兼容老浏览器，将es6转化为es5）
      • babel-loader
    • 代码规范（例如空格，缩进等代码风格规范）
      • eslint
    • 代码分割和打包（webpack本职工作）
      • webpack的自身核心功能

3.1 es6转化——babel-loader

定义编译配置（options或.babelrc）。

3.1.1 babel-loader写入webpack配置

1 安装babel-loader

step1 安装babel-loader

  • babel-loader只是接口，本身不做编译工作（编译使用@babel/core包），因此要安装2个包——babel-loader & @babel/core
  • 命令：npm install babel-loader @babel/core --save-dev

–save, 作为开发依赖安装（编译步骤是开发阶段完成的）

loader作用: 定义对某种类型文件的处理方案

2 配置babel-loader

step2 配置babel-loader
loader和use是两个配置方式，对应3种配置方法。

// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,loader: "babel-loader", // 写法1// use: ["babel-loader", "xxx-loader"],// 写法2 按照数组顺序依次使用loader处理文件// use: { // 写法3 loader配置//    loader: "babel-loader",//    options: {//   }// }}]}
}
打包

打包
不写配置，看打包结果（es5写法是否可转为es6）
打包结果：箭头函数、let还在，说明没有转换为es5.

在这里插入图片描述

问题
  • 为什么配置了babel-loader，es6仍没有转换为es5呢？
    • 规范
  • 采用何种es规范，不同年代有不同标准，目标是什么（支持ie与否）——babel不知要编译到何种程度，于是没有转换。
    • 解决方案：给babel指定编译规范——preset（可理解为集合好的编译规范）
  • 项目中常用的preset是@babel/preset-env
3 安装preset

安装preset，命令：npm install @babe/preset-env --save-dev

在这里插入图片描述

4 配置preset

配置preset

module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,// loader: "babel-loader", // 写法1use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env',{targets: {//编译目标browsers: [// 以浏览器为描述目标">1%",// 支持所有占有率>1%的浏览器"last 2 versions",//支持最后2个版本"not ie<=8" //不需要支持小于ie8以前的浏览器]}}]]}}}]}
}
5 打包

执行打包命令：webpack

打包结果：此时es6会编译为es5，可以发现，打包文件没有任何箭头函数或let关键字，说明babel已经生效。
在这里插入图片描述

3.1.2 .babelrc

  • 通常情况下，babel-loader配置不需要手动配置
  • 很多脚手架里会用到.babelrc

将babel-loader的配置移动到.babelrc里，写法如下

.babelrc是json文件，需要遵循json格式。

// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,// loader: "babel-loader", // 写法1use: {loader: 'babel-loader'}}]}
}

// .babelrc
{"presets": [["@babel/preset-env",{"targets": {"browsers": [">1%","last 2 versions","not ie<=8"]}}]]
}

即，将options移动到.babelrc文件里。

3.2 代码规范——eslint

  • eslint官网：https://eslint.org/
  • eslint的本质
    • eslint自身不做任何代码规范检查。
    • 代码规范是根据团队成员习惯共同达成的规范，每个团队的规范不尽相同，因此eslint无法做规范。
    • 可以使用第三方规范，插入eslint即可使用。

3.2.1 版本差异

  • webpack3-4，使用eslint-loader（5后废弃）
  • webpack5，使用eslint-webpack-plugin

以前使用loader，现在改用插件。
配置的写法是相似的。

3.2.2 配置

1 安装eslint

命令：npm install eslint eslint-webpack-plugin --save-dev
需要安装eslint和eslint-webpack-plugin

此两个包的关系与babel-loader和@babel/core类似。

安装失败，提示npm error network ‘proxy‘ config is set properly. See: ‘npm help config‘，参考https://blog.csdn.net/m0_74358570/article/details/141425542

2 注册插件

注意配置文件是node语法。

// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin({// 插件配置})]
}
3 配置插件

直接在webpack.config.js配置是可以的，但也可以像.babelrc一样，单独在其他文件——.eslintrc.js里配置。

// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin()]
}

// .eslintrc.js
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范],plugins: [// 使用插件作为规范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}
4 rules——eslint检查
  • eslint检查主要在开发模式检查，打包不会检查——因此将代码用开发模式启动。
  • 命令：webpack-dev-server
  • 效果：rules属性的no-console为0，项目启动不会报错（a.js中有console），为2，项目启动会报错。
  • 报错处理
    1. 执行以上命令，需要安装webpack-dev-server，安装命令：npm install webpack-dev-server --save-dev
    2. 安装成功后，执行webpack-dev-server，仍报错
    3. 在 package.json 中添加一个 script 来启动 webpack-dev-server. 执行npm run webpack-dev-server
      // package.json
"scripts": {"webpack-dev-server": "webpack-dev-server"
}
    4. 执行过程中提示安装webpack-cli
      • 注意需要升级webpack版本
    5. 再次执行npm run webpack-dev-server，仍有问题，不管了

3.2.3 规范

1 extends继承规范
  • 如果一个个写rules很麻烦，那么可以继承现成的规范，如eslint-config-standard，eslint-config-airbnb，可以安装并继承规范。

以eslint-config-standard为例。

.eslintrc.js内定义的规范优先级要高于继承的eslint-config-standard等规范。
多数项目会继承eslint-config-standard规范。

1 安装命令：npm install eslint-config-standard

安装失败，版本冲突疑似

2 继承规范

// .eslintrc.js
// 修改了extends属性
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范"standard"],plugins: [// 使用插件作为规范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}
2 plugins插件
  • plugins，支持特殊语法。
    • 提供额外的rules
    • 提供一套现成的规范

.vue文件，比如要求template内所有的内容需要写在一个div标签内，这样的风格eslint本身的rules没有，那么就需要用到plugins
vue项目会安装eslint-plugin-vue，并且会定义vue特殊的rules，以及继承vue规范。

以eslint-plugin-vue为例
1 安装eslint-plugin-vue，命令: npm install eslint-plugin-vue --save-dev
2 注册插件

// .eslintrc.js
// 修改了extends属性
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范"standard","plugin:vue/strongly-recommended" //继承vue的规范],plugins: [// 使用插件作为规范"vue"// 注册插件],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}

p3代码分割和打包似乎没讲.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/85153.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/85153.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Nginx转发中相对路径资源302问题的分析与解决

Nginx转发中相对路径资源302问题的分析与解决

Nginx转发中相对路径资源302问题的分析与解决 典型案例&#xff1a;后端页面引入./test.css的302问题 问题场景 假设我们有一个后端服务&#xff0c;其页面中通过相对路径引入了CSS文件&#xff1a; <!-- 后端页面代码 --> <link rel"stylesheet" href&…
阅读更多...
Vue3 + TypeScript合并两个列表到目标列表，并且进行排序，数组合并、集合合并、列表合并、list合并

Vue3 + TypeScript合并两个列表到目标列表，并且进行排序，数组合并、集合合并、列表合并、list合并

在Vue 3 TypeScript中合并并排序两个列表&#xff0c;可以通过以下步骤实现&#xff1a; 解决方案代码 vue 复制 下载 <script setup lang"ts"> import { ref, computed } from vue;// 定义列表项类型 interface ListItem {id: number;name: string;valu…
阅读更多...
Python-教程

Python-教程

1 需求 2 接口 3 示例 4 参考资料 Python 教程 — Python 3.13.5 文档
阅读更多...
Excel数据导出小记

Excel数据导出小记

文章目录 前言一、DataTable >EXCEL二、DBReader >Excel &#xff08;NPOI&#xff09;三、分页查询 DbReader>Excel (MiniExcel)总结&#xff1a; 前言 最近经历了一次数据量比较大的导出&#xff0c;也做了各种优化尝试&#xff0c;这里稍记录一下 一、DataTable …
阅读更多...
深入理解链表数据结构：从Java LinkedList到自定义实现

深入理解链表数据结构：从Java LinkedList到自定义实现

引言 链表作为基础数据结构之一&#xff0c;在Java集合框架中以LinkedList的形式提供。本文将深入分析Java原生LinkedList的实现机制&#xff0c;并介绍我自定义实现的MyLinkedList&#xff0c;最后对比两者的设计差异与实现特点。 Java原生LinkedList解析 基本结构 Java的…
阅读更多...
【深度学习】卷积神经网络（CNN）：计算机视觉的革命性引擎

【深度学习】卷积神经网络（CNN）：计算机视觉的革命性引擎

卷积神经网络&#xff08;CNN&#xff09;&#xff1a;计算机视觉的革命性引擎 一、算法背景&#xff1a;视觉智能的进化之路1.1 传统视觉处理的困境1.2 神经科学的启示 二、算法理论&#xff1a;CNN的核心架构2.1 基础组成单元卷积层&#xff1a;特征提取引擎池化层&#xff1…
阅读更多...
使用@SpringJUnitConfig注解开发遇到的空指针问题

使用@SpringJUnitConfig注解开发遇到的空指针问题

Spring测试中的版本陷阱&#xff1a;SpringJUnitConfig与JUnit版本兼容性深度解析 一个看似简单的空指针异常&#xff0c;背后可能隐藏着JUnit版本不匹配的“幽灵”。 一、SpringJUnitConfig&#xff1a;Spring与JUnit 5的桥梁 SpringJUnitConfig是Spring TestContext框架为**…
阅读更多...
[2025CVPR]AdcSR：一种高效实世界图像超分辨率的对抗扩散压缩方法

[2025CVPR]AdcSR：一种高效实世界图像超分辨率的对抗扩散压缩方法

目录 1. 背景与挑战 2. AdcSR模型概述 2.1 模型架构 2.2 训练策略 3. 公式与原理 4. 创新点 5. 实验与结果 5.1 实验设置 5.2 结果对比 5.3 消融实验 6. 结论 在计算机视觉领域&#xff0c;图像超分辨率&#xff08;Image Super-Resolution, ISR&#xff09;一直是一…
阅读更多...
Go 语言中的字符串基本操作

Go 语言中的字符串基本操作

这篇文章已经放到腾讯智能工作台的知识库啦&#xff0c;链接在这里&#xff1a;ima.copilot-Go 入门到入土。要是你有啥不懂的地方&#xff0c;就去知识库找 AI 聊一聊吧。 本篇将详细讲解 Go 语言中与字符串相关的操作。 1、rune 和 字符串长度 1、Go 函数语法约定 在开始…
阅读更多...
数学建模会议笔记

数学建模会议笔记

看似优化模型 建立整数规划模型 用优化软件、启发式方法、精确方法求解 建立图论和组合优化模型用组合优化方法、启发式方法求解 建立博弈论模型 数据统计分析与可视化- 数据拟合、参数估计、插值、数据的标准化、去伪补全相关度分析、分类、聚类等 最优化理论和方法 线性规划…
阅读更多...
学习昇腾开发的六天--ACL应用开发之运行第一个实例

学习昇腾开发的六天--ACL应用开发之运行第一个实例

1、下载一个实例&#xff0c;运行一个图像分类实例&#xff08;环境&#xff1a;Ubuntu22.04&#xff0c;硬件&#xff1a;昇腾310B1&#xff0c;加速模块&#xff1a;atlas 200i a2&#xff09; samples: CANN Samples - Gitee.com 目录结构如下&#xff1a; ├── data │…
阅读更多...
可灵AI-快手公司自主研发的一款AI视频与图像生成工具

可灵AI-快手公司自主研发的一款AI视频与图像生成工具

可灵AI是由快手公司自主研发的一款AI视频与图像生成工具&#xff0c;于2024年6月正式推出。以下是对其的详细介绍&#xff1a; 核心功能 AI视频生成&#xff1a; 文生视频&#xff1a;输入文字描述&#xff0c;AI可自动生成匹配的视频片段。图生视频&#xff1a;上传图片&…
阅读更多...
创客匠人解析：存量时代创始人 IP 打造与免费流量池策略

创客匠人解析：存量时代创始人 IP 打造与免费流量池策略

在存量竞争的商业环境中&#xff0c;企业如何突破增长瓶颈&#xff1f;创客匠人结合新潮传媒创始人张继学的实战洞察&#xff0c;揭示 “品牌 IP” 双轮驱动下的免费流量池构建逻辑&#xff0c;为知识变现与创始人 IP 打造提供新思路。 一、存量时代的流量革命&#xff1a;从…
阅读更多...
提升语义搜索效率：LangChain 与 Milvus 的混合搜索实战

提升语义搜索效率：LangChain 与 Milvus 的混合搜索实战

我从不幻想人生能够毫无波折&#xff0c;但我期望遭遇困境之际&#xff0c;自身能够成为它的克星。 概述 LangChain与Milvus的结合构建了一套高效的语义搜索系统。LangChain负责处理多模态数据&#xff08;如文本、PDF等&#xff09;的嵌入生成与任务编排&#xff0c;Milvus作…
阅读更多...
MySQL配置简单优化与读写测试

MySQL配置简单优化与读写测试

测试方法 先使用sysbench对默认配置的MySQL单节点进行压测&#xff0c;单表数据量为100万&#xff0c;数据库总数据量为2000万&#xff0c;每次压测300秒。 sysbench --db-drivermysql --time300 --threads10 --report-interval1 \--mysql-host192.168.0.10 --mysql-port3306…
阅读更多...
猎板深耕透明 PCB，解锁电子设计新边界

猎板深耕透明 PCB，解锁电子设计新边界

在电子技术快速迭代的当下&#xff0c;猎板始终关注行业前沿&#xff0c;透明 PCB 作为极具创新性的技术&#xff0c;正在改变电子设备的设计与应用格局。​ 从传统的绿色、棕色 PCB 到如今的透明 PCB&#xff0c;其突破在于特殊基材与导电材料的运用&#xff0c;实现 85%-92%…
阅读更多...
FLAML：快速轻量级自动机器学习框架

FLAML：快速轻量级自动机器学习框架

概述 FLAML&#xff08;Fast and Lightweight AutoML&#xff09;是微软开发的一个高效的自动机器学习&#xff08;AutoML&#xff09;框架。它专注于在有限的计算资源和时间约束下&#xff0c;自动化机器学习管道的构建过程&#xff0c;包括特征工程、模型选择、超参数调优等…
阅读更多...
Github 以及 Docker的 wsl --list --online无法访问问题

Github 以及 Docker的 wsl --list --online无法访问问题

修改电脑DNS 腾讯 DNS IP&#xff1a;119.29.29.29 备用&#xff1a;182.254.116.116 阿里DNS IP&#xff1a;223.5.5.5 223.6.6.6 百度DNS IP:180.76.76.76 谷歌DNS IP:8.8.8.8
阅读更多...
Go 语言中的变量和常量

Go 语言中的变量和常量

这篇文章已经放到腾讯智能工作台的知识库啦&#xff0c;链接在这里&#xff1a;ima.copilot-Go 入门到入土。要是你有啥不懂的地方&#xff0c;就去知识库找 AI 聊一聊吧。 1、变量的声明与使用 我们来探讨编程语言中最核心的概念之一&#xff1a;变量。 1、静态语言中的变量…
阅读更多...
破局传统订货！云徙渠道订货系统赋能企业数字化渠道升级

破局传统订货！云徙渠道订货系统赋能企业数字化渠道升级

在数字化浪潮的推动下&#xff0c;传统经销商订货模式面临着诸多挑战&#xff0c;如信息孤岛、系统崩溃、移动化不足等问题。云徙渠道订货系统凭借其创新的数字化架构和强大的功能模块&#xff0c;正在成为企业实现渠道数字化转型的重要工具。 系统功能与创新 云徙渠道订货系统…
阅读更多...
最新文章

Copyright @ 2022~2023