Webpack5入门到原理11:处理 js 资源

有人可能会问,js 资源 Webpack 不能已经处理了吗,为什么我们还要处理呢?

原因是 Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。

其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。

针对 js 兼容性处理,我们使用 Babel 来完成

针对代码格式,我们使用 Eslint 来完成

我们先完成 Eslint,检测代码格式无误后,在由 Babel 做代码兼容性处理

Eslint

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是:它是用来检测 js 和 jsx 语法的工具,可以配置各项功能

我们使用 Eslint,关键是写 Eslint 配置文件,里面写上各种 rules 规则,将来运行 Eslint 时就会以写的规则对代码进行检查

1. 配置文件

配置文件由很多种写法:

.eslintrc.*:新建文件,位于项目根目录
.eslintrc
.eslintrc.js
.eslintrc.json
区别在于配置格式不一样
package.json 中 eslintConfig:不需要创建文件,在原有文件基础上写
ESLint 会查找和自动读取它们,所以以上配置文件只需要存在一个即可

2. 具体配置

我们以 .eslintrc.js 配置文件为例:

module.exports = {// 解析选项parserOptions: {},// 具体检查规则rules: {},// 继承其他规则extends: [],// ...// 其他规则详见:https://eslint.bootcss.com/docs/user-guide/configuring
};

parserOptions 解析选项

parserOptions: {ecmaVersion: 6, // ES 语法版本sourceType: "module", // ES 模块化ecmaFeatures: { // ES 其他特性jsx: true // 如果是 React 项目,就需要开启 jsx 语法}
}

rules 具体规则

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
  • "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
rules: {semi: "error", // 禁止使用分号'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句,否则警告'default-case': ['warn', // 要求 switch 语句中有 default 分支,否则警告{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了],eqeqeq: ['warn', // 强制使用 === 和 !==,否则警告'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告],
}

 更多规则详见:规则文档

extends 继承

开发中一点点写 rules 规则太费劲了,所以有更好的办法,继承现有的规则。

现有以下较为有名的规则:

  • Eslint 官方的规则:eslint:recommended
  • Vue Cli 官方的规则:plugin:vue/essential
  • React Cli 官方的规则:react-app
// 例如在React项目中,我们可以这样写配置
module.exports = {extends: ["react-app"],rules: {// 我们的规则会覆盖掉react-app的规则// 所以想要修改规则直接改就是了eqeqeq: ["warn", "smart"],},
};

3. 在 Webpack 中使用

下载包

npm i eslint-webpack-plugin eslint -D

定义 Eslint 配置文件

.eslintrc.js

module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6,sourceType: "module",},rules: {"no-var": 2, // 不能使用 var 定义变量},
};

修改 js 文件代码

main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);

配置

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),],mode: "development",
};

运行指令

npx webpack

在控制台查看 Eslint 检查效果

4. VSCode Eslint 插件

打开 VSCode,下载 Eslint 插件,即可不用编译就能看到错误,可以提前解决

但是此时就会对项目所有文件默认进行 Eslint 检查了,我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件,不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

.eslintignore
# 忽略dist目录下所有文件
dist

Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

1. 配置文件

配置文件由很多种写法:

babel.config.*:新建文件,位于项目根目录
babel.config.js
babel.config.json
.babelrc.*:新建文件,位于项目根目录
.babelrc
.babelrc.js
.babelrc.json
package.json 中 babel:不需要创建文件,在原有文件基础上写
Babel 会查找和自动读取它们,所以以上配置文件只需要存在一个即可

2. 具体配置

我们以 babel.config.js 配置文件为例:

module.exports = {// 预设presets: [],
};

presets 预设

简单理解:就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设,允许您使用最新的 JavaScript。
  • @babel/preset-react:一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript:一个用来编译 TypeScript 语法的预设

3. 在 Webpack 中使用

下载包

npm i babel-loader @babel/core @babel/preset-env -D

定义 Babel 配置文件
babel.config.js

module.exports = {presets: ["@babel/preset-env"],
};

修改 js 文件代码

main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入资源,Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);

配置

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),],mode: "development",
};

运行指令

npx webpack

打开打包后的 dist/static/js/main.js 文件查看,会发现箭头函数等 ES6 语法已经转换了

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

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

相关文章

排序之归并排序

在计算机科学中,排序是一种常见的操作。它用于将一组元素按照一定的顺序排列。归并排序是一种非常有效的排序算法,其时间复杂度为O(nlogn),空间复杂度为O(n)。本文将详细介绍归并排序的工作原理和实现方法。 归并排序的工作原理 归并排序的…

智慧之光:ChatGPT 引领工作效率新纪元

随着科技的不断发展,人工智能(AI)已经逐渐融入我们的日常生活和工作中。其中,ChatGPT 作为一种先进的 AI 技术,正逐步改变我们的工作方式,提升我们的工作效率。本文灸哥将介绍如何利用ChatGPT提升工作效率&…

Pytest插件pytest-django让Django测试更高效

在Django应用开发中,测试是确保应用质量的关键环节。然而,Django自带的测试框架并非总能满足开发者的需求,而Pytest插件 pytest-django 则为我们提供了更为灵活、强大的测试工具。本文将深入介绍 pytest-django 插件的基本用法和实际案例&…

后面的输入框与前面的联动,输入框只能输入正数(不用正则)

概要 提示:这里可以描述概要 前面的输入框是发票金额,后面的输入框是累计发票金额(含本次)--含本次就代表后倾请求的接口的数据(不是保存后返显的-因为保存后返显的是含本次)是不含本次的所以在输入发票金…

Linux基础命令[1]-ls

文章目录 1. ls 命令说明2. ls 常用命令参数2.1 -l(展示详细信息)2.2 -a/-A(展示隐藏文件)2.3 -t/-c/-r(展示信息排序)2.4 -h(展示文件大小)2.5 -R(递归展示)…

iphone5s基带部分电源部分主主电源供电及

时序: 1.,基带电源的供电,基带电源也叫pmu。 首先时序图说电池提供供电,电池是J6接口,视频习惯把接口称之为座子。查U2_RF芯片,发现供电信号为PP_BATT_VCC_CONN,但是没查到跟电池座子有关系,电池座子写的是…

E. Increasing Subsequences -思维构造

题面 分析 如果构造一个递增序列,如 1 , 2 , 3 , 4 , . . . 1,2,3,4,... 1,2,3,4,... ,可以发现是存在一定规律的,一一列举。 1 —— 有两个上升子序列(1和空序列)。1,2 —— 有四个上升子序列(空序列,…

linux C语言socket函数recv

recv 函数是在 Linux C 语言网络编程中用于从已连接的套接字接收数据的函数。它通常与 TCP 连接一起使用,但也可以用于 UDP(尽管对于 UDP,更常使用 recvfrom,因为它还可以接收发送方的地址信息)。 函数原型 recv 函数…

SpringMVC基础知识学习笔记

Universe Infinity Inc. 目录 一、学习SpringMVC主要是学什么1、SpringMVC的基本原理2、SpringMVC学习串联 二、快速体验SpringMVC的开发1、新建项目,转成web项目2、引入依赖3、编写Spring的配置类4、配置web启动类,替代web.xml5、编写Handler&#xff…

第十二篇【传奇开心果系列】Ant Design Mobile of React开发移动应用:内置组件实现酷炫CSS 动画

Ant Design Mobile of React 开发移动应用示例博文系列 第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始 第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用 第三篇【传奇开心果系列】Ant Design Mobile of Reac…

Java 如何使用单例类

单例的目的是控制对象的创建,将对象的数量限制为只有一个。由于只有一个单例实例,单例的实例字段将只会在每个类中出现一次,就像静态字段一样。单例通常控制对资源的访问,比如数据库连接或套接字。 例如,如果您只有一…

beego的模块篇 - I18n国际化

1. i18n 安装导入 安装该模块: go get github.com/beego/i18n 导入引用包: import ("github.com/beego/i18n" ) conf 目录下就有 locale_en-US.ini 和 locale_zh-CN.ini 两个本地化文件。 本地化文件的文件名和后缀是随意的,不…

MySQL 索引(上)

🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页:小小恶斯法克的博客 🎈该系列文章专栏:重拾MySQL-进阶篇 🍹文章作者技术和水平很有限,如果文中出现…

libpcap简明教程

文章目录 前言tcpdump的使用libpcap API的简单使用libpcap API的进阶使用 前言 因为之前简单写过wireshark入门指北,所以我知道基本的抓包流程。最近尝试调用libpcap的C API接口,顺道整理下。 本文实验如下: 使用tcpdump命令抓取目标地址为…

【漏洞复现】Hikvision SPON IP网络对讲广播系统命令执行漏洞(CVE-2023-6895)

文章目录 前言声明一、系统简介二、漏洞描述三、影响版本四、漏洞复现五、修复建议 前言 Hikvision Intercom Broadcasting System是中国海康威视(Hikvision)公司的一个对讲广播系统。 声明 请勿利用文章内的相关技术从事非法测试,由于传播…

[已解决]前端使用el-upload,后端使用文件上传阿里云报错:异常信息:java.lang.NullPointerException: null

前端使用el-upload,后端使用文件上传阿里云报错: 报错原因:前端image参数未传进去 解决方法:在el-upload添加属性 name"image" 文件传进去了!

回溯法:0-1背包问题

问题描述 给定种物品和一背包。 物品的重量是, 其价值为,背包的容量为 c。 问应该如何选择装入背包中的物品,使得装入背包中物品的总价值最大?注意物品不重复! 实例:物品价值V{12, 11, 9, 8}, 物品重量W{8, 6, 4, 3},…

手写Vue3源码

Vue3核心源码 B站视频地址:https://www.bilibili.com/video/BV1nW4y147Pd?p2&vd_source36bacfbaa95ea7a433650dab3f7fa0ae Monorepo介绍 Monorepo 是管理项目代码的一种方式,只在一个仓库中管理多个模块/包 一个仓库可以维护多个模块,…

Java API集合(2)

1.时间日期类 1.1 Date类(应用) 计算机中时间原点 1970年1月1日 00:00:00 时间换算单位 1秒 1000毫秒 Date类概述 Date 代表了一个特定的时间,精确到毫秒 Date类构造方法 方法名说明public Date()分配一个 Date对象,并初始化…

Fog-Aware Adaptive YOLO for Object Detection in Adverse Weather

Abstract 提出了一种雾自适应YOLO算法。使用一种雾评估算法将图片分为有雾和无雾图片,随后将标准的YOLO应用于正常图片,自适应YOLO应用于有雾图片。 Method 目前的除雾方法去除雾霾时不考虑其雾度和发生频率。例如,图像自适应YOLO算法[6]试…