webpack-babel2

浏览器的兼容性问题

浏览器的兼容性问题不知包括随屏幕大小而变化，还包括针对浏览器支持的特性（如css特性，js特性） 做处理。
目前市场上有很多浏览器：Chrome,Safari,IE,Edge等，要根据它们的市场占有率来决定是否兼容它们。
在脚手架中经常看到类似的配置:
在这里插入图片描述
在生产环境中，该配置指定了支持的浏览器版本范围，包括超过全球市场份额0.2%的浏览器、尚未停止维护的浏览器，以及排除了Opera Mini所有版本的浏览器。
在开发环境中，该配置指定了最新版本的Chrome、Firefox和Safari浏览器。这有助于开发人员和构建工具确定在不同环境中需要支持的浏览器版本。

可以在https://caniuse.com/usage-table查看浏览器的市场占有率。
在这里插入图片描述

browserslist

browserslist可以在不同的前端工具(如babel,postcsspreset-env,Autoprefixer等)之间共享目标浏览器和node版本的配置。
编写这样的 配置后，会使用 caniuse-lite(工具的数据来自caniuse网站上)获取浏览器的信息，决定是否支持该浏览器。

      ">0.2%","not dead","not op_mini all"

browserslist的编写条件说明

  1. defaults: (>5%,last 2 versions ,Firefox ESR , not dead)

  2. 5% 还可以配合>=,<= ,in等使用。：
    · >=5% in US 在美国使用率大于或等于5%的浏览器
    在这里插入图片描述

  3. dead: 24个月内没有官方支持或更新的浏览器。

  4. last 2 versions 每个浏览器的最后两个版本。
    在这里插入图片描述
    其他不常用的规则：
    在这里插入图片描述

配置 browserslist

可以在package.json中配置：
在这里插入图片描述
也可以单独配置一个.browserslistrc文件
在这里插入图片描述

配合babel使用

可以设置targets进行配置
在这里插入图片描述

配置targets会覆盖browserslist的配置，所以一般推荐在browserslist中配置，因为想postcss等要使用browserslist进行适配。

Stage-X (了解)

TC39是指技术委员会(Technical Committee)第39号,它是ECMA(ECMAScript规范下的JavaScript语言规范化的机构)的一部分，ECMA固定了 JavaScript如何一步步发展的。
TC39会在不同的阶段加入不同的语言特性，新流程设计4个不同的Stage:
Stage 0: strawman(稻草人) 尚未提交最为正式议案的讨论，想法，补充等。

Stage 1: proposal(提议) 提案被正式化，但还需要考察与其他提案的相互影响。

Stage 2: draft(草稿) 提案提供了规范的初稿、草稿，语言的实现者会观察下runtime(运行时)是否合理。

Stage 3: candidate(候补) 在这个阶段，规范的编辑人员和审核人员在最终规范上签字， Stage 3阶段的提案不会有太大的改变，在发布前会修改一些问题。

Stage 4: finished(完成) 提案会在下一个ECMAScript规范中发布

在babel 7之前 可以看到这样的写法 babel-preset-stage-x,在7之后推荐使用preset-env来设置：

module.exports = {//预设presets: ["stage-0"],
};

babel的配置文件

babel提供了两种配置文件的编写：
babel.config.json(.js,.cjs,mjs) ：babel7之后 可以直接作用于Monorepos项目的子包，更推荐。
.babelrc.json(或.babelrc,.js,.cjs,.mjs):早期配置比较多，但对于配置Monorepos项目比较麻烦

polyfill 垫片，补丁

es6中一些特殊的语法例如const,let,function会通过babel转换成es5的语法，但对于Promise,Symbol .includes(),.isArray()等一些es5中原本没有语法要通过polyfill来处理。
使用polyfill: npm i core-js regenerator-runtime --save
需要下babel-config.js中对preset配置一些属性：
useBuiltIns:设置以什么样的方式使用polyfill
corejs: 设置corejs的版本。还可以设置是否对提议阶段的特性支持。

useBuiltIns 三个常见的值

  1. false
    打包后的文件不使用polyfill进行适配，这个时候不需要对corejs进行配置。
    2.usage
    会自动检测需要polyfill的代码，打包后的代码体积较小，需要设置corejs
module.exports = {presets: [["@babel/preset-env",{useBuiltIns: "usage", corejs: 3.8, // targets: "> 0.25%, not dead",},],],
};

打包后的文件：
在这里插入图片描述
需要注意的是browserslist的配置也会影响打包后的结果，
在这里插入图片描述
例如>0.5%(大于5%的浏览器兼容性较好，支持es6),打包后的代码与原来的代码差别不大。
在这里插入图片描述
3. entry
如果依赖某个库本身使用了polyfill的某些特性，设置为usage后会报错，这时可以使用entry。
还需要在入口文件中添加import "core-js/stable" import "regenerator-runtime/runtime"
它会根据browserslist的配置导入所有的使用polyfill，会导致打包后的文件体积较大。
在这里插入图片描述
在这里插入图片描述

使用react,jsx

jsx需要babel转换，因此需要安装对应的preset:
npm i @babel/preset-react -D
此外还需要安装react对应的包：npm i react react-dom

配置webpack:
在这里插入图片描述
index.html:
在这里插入图片描述
main.js:
在这里插入图片描述

配置ts

安装 ts的comoiler

可以安装 ts的comoiler来转换为ts :npm i typescript -d
另外还需要生成一个tsconfig.json文件: tsc -- init(必须要先全局安装npm install typescript -g)
然后在用npx tsc 进行编译

ts-loader

可以使用webpack配置ts-loader:
npm i ts-loader -D
在这里插入图片描述

使用babel

还可以使用babel:
npm i @babel/preset-typescript -D
webpack:

在这里插入图片描述
babel.config.js:
在这里插入图片描述

ts-loader 和babel 的选择

ts-loader可以将ts转换为js还会进行类型校验，但是无法使用babel的polyfill.
babel可以使用polyfill，但无法进行类型校验。
在打包前可以先进行类型的校验，然后在打包。
可以使用两个脚本，进行检测
npm run type-check 可以对类型进行检测
npm run type-check-watch 可以实时对类型进行检测

  "scripts": {"build": "npx webpack","ts-check":"tsc  --noEmit","tc-check-watch":"tec --noEmit --watch"},

全部代码：
webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "production",devtool: "source-map",entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),clean: true,},resolve: {extensions: [".js", ".json", ".jsx", ".tsx", ".ts"],},module: {rules: [{test: /\.m?js$/,exclude: /node_modules/,use: {loader: "babel-loader",},},{test: /\.jsx$/,use: "babel-loader",},{test: /\.ts$/,use: "babel-loader",},],},plugins: [new HtmlWebpackPlugin({title: "test项目",template: "./index.html",}),],
};

babel:

module.exports = {presets: [["@babel/preset-env",{useBuiltIns: "entry", // 按需引入 corejs 中的模块corejs: 3.8, // 核心 js 版本// targets: "> 0.25%, not dead", // 浏览器支持范围},],["@babel/preset-react"],["@babel/preset-typescript", {useBuiltIns: "usage", corejs: 3.8, },],],
};

.browserslistrc

 > 0.25%last 2 versionnot dead

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

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

相关文章

【onnx 模型推理加速】如何验证 onnxruntime-gpu 版本 安装成功

【onnx 模型推理加速】如何验证 onnxruntime-gpu 版本 安装成功

首先安装gpu 版本的onnx 包 pip install onnxruntime-gpu要验证onnxruntime-gpu版本是否安装成功&#xff0c;并且GPU加速功能正常&#xff0c;你可以执行以下步骤&#xff1a; 检查安装的ONNX Runtime版本&#xff1a; 首先&#xff0c;你可以检查安装的ONNX Runtime版本&am…
阅读更多...
vue 对axios二次封装，配置api层，基于mock测试数据

vue 对axios二次封装，配置api层，基于mock测试数据

一、初始化环境&#xff08;默认都会安装vue3项目ts&#xff09; 安装mock&#xff1a;全局安装 # 使用 npm 安装 npm install mockjs vite-plugin-mock # 使用 yarn 安装 yarn add mockjs vite-plugin-mock 二、进行配置 在vite.config.ts中进行配置 import { UserConfigEx…
阅读更多...
【数值计算方法】4.1 / 数值求积公式

【数值计算方法】4.1 / 数值求积公式

一般的构造方法
阅读更多...
JMeter--后置处理器--JSON提取器（JSON Extractor）

JMeter--后置处理器--JSON提取器（JSON Extractor）

数据关联&#xff0c;可以通过JsonPath提取所需要的值&#xff0c;功能非常强大&#xff08;注意取样器返回必须为 Json&#xff09;&#xff1b;底层采用jackson实现&#xff1b; 右键 >>> 添加 >>> 后置处理器 >>> JSON提取器&#xff08;JSON E…
阅读更多...
MATLAB算法实战应用案例精讲-【图像处理】图像分割（基础篇）（三）

MATLAB算法实战应用案例精讲-【图像处理】图像分割（基础篇）（三）

目录 前言 知识储备 Labview图像处理 一、Vision图像工具安装 二、图像采集
阅读更多...
NodeRed节点编辑用于边缘计算和规则引擎，能做带UI界面和业务逻辑的上位机或前端应用吗？

NodeRed节点编辑用于边缘计算和规则引擎，能做带UI界面和业务逻辑的上位机或前端应用吗？

先说结论&#xff0c;可以&#xff0c;但是需要有页面嵌套继承类似的技术&#xff0c;实现页面模块化封装&#xff0c;否则难以实现复杂应用。 相信目光敏锐的人都在关注节点编辑在自身行业的应用&#xff01; NodeRed在边缘计算做数据协议解析、以及物联网平台中作为规则链引…
阅读更多...
实现 Android 设备屏幕录制的批处理脚本

实现 Android 设备屏幕录制的批处理脚本

在本文中&#xff0c;我们将介绍如何使用批处理脚本来实现在 Android 设备上进行屏幕录制&#xff0c;并将录制的视频文件传输到计算机上。这个脚本利用了 Windows 的批处理脚本和 Android 的 adb 工具。 背景 在进行 Android 应用开发、教学演示或问题排查时&#xff0c;我们…
阅读更多...
推荐几本C#/.NET进阶书籍

推荐几本C#/.NET进阶书籍

前言 今天大姚给大家推荐7本C#/.NET进阶书籍&#xff0c;希望能帮助到有需要的小伙伴&#xff0c;当然假如你有更好的C#/.NET进阶书籍推荐欢迎文末留言。 C#/.NET/.NET Core推荐学习书籍&#xff08;已分类&#xff09;&#xff1a;C#/.NET/.NET Core推荐学习书籍&#xff08;…
阅读更多...
golang rabbitmq客户端连接及重连

golang rabbitmq客户端连接及重连

目录 1、连接、发送、发送异常、重连2、调用示例 1、连接、发送、发送异常、重连 package rabbitmqimport ("encoding/json""fmt""time""github.com/sirupsen/logrus""github.com/streadway/amqp" )type RabbitMQ struct {…
阅读更多...
Spark在大数据集群下的部署

Spark在大数据集群下的部署

Spark部署文档 前提:需要保证配置好了三台装好hadoop的虚拟机hadoop102&#xff0c;hadoop103&#xff0c;hadoop104 下载地址 https://dlcdn.apache.org/spark/spark-3.2.0/spark-3.2.0-bin-hadoop3.2.tgz 条件 PYTHON 推荐3.8JDK 1.8 解压 解压下载的Spark安装包 tar…
阅读更多...
春秋云境：CVE-2022-25578[漏洞利用]

春秋云境：CVE-2022-25578[漏洞利用]

通过题目标题查询漏洞信息 所以我们渗透的重点就要放在.htaccess文件上 这是一种分布式配置文件&#xff0c;所以我们先寻找web管理登录页面 打开主页就能看到右下角的“管理”&#xff0c;或者我们使用dirsearch进行扫描也可以 在登录页面尝试弱口令登录 输入该CMS相关的一…
阅读更多...
几道练习题八

几道练习题八

第 1 题 【 问答题 】 • 多项式相加 我们经常遇到两多项式相加的情况&#xff0c; 在这里&#xff0c; 我们就需要用程序来模拟实现把两个多项式相加到一起。 首先&#xff0c; 我们会有两个多项式&#xff0c;每个多项式是独立的一行&#xff0c; 每个多项式由系数、 幂数这样…
阅读更多...
【游戏专区】贪吃蛇

【游戏专区】贪吃蛇

1&#xff0c;游戏背景 贪吃蛇&#xff08;Snake&#xff09;是一款经典的电子游戏&#xff0c;最初在1976年由 Gremlin 公司开发。它的游戏背景相对简单&#xff0c;但具有高度的成瘾性。 1. **游戏场景**&#xff1a;通常在一个有界的矩形区域内进行&#xff0c;可以是一个…
阅读更多...
关于Android绘制这一遍就够了

关于Android绘制这一遍就够了

Android绘制基础 Android平台提供了一套完整的UI框架&#xff0c;其中包括了绘制组件和绘制API。在Android中&#xff0c;绘制主要涉及到两个核心概念&#xff1a;Canvas和Paint。 Canvas Canvas是Android中的一个类&#xff0c;它代表了绘图的画布。你可以在这个画布上进行…
阅读更多...
Swift函数与闭包

Swift函数与闭包

一.Swift函数的定义与调用&#xff1a; Swift中的函数使用func关键字进行定义&#xff0c;语法如下&#xff1a; func 函数名(参数名1: 参数类型1, 参数名2: 参数类型2, ...) -> 返回类型 {// 函数体// 执行逻辑return 返回值 }其中&#xff0c;参数名和参数类型是可选的&…
阅读更多...
Android Studio实现页面跳转

Android Studio实现页面跳转

建立文件 temp.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"…
阅读更多...
layui--table里使用switch

layui--table里使用switch

1. 项目需求 在layui.table上面渲染后的列表上面加一个switch开关&#xff0c;监听switch开关的动作&#xff0c;实现本列数据的状态切换&#xff01; 实现效果如下&#xff1a; 2. 实现方式 下面介绍的思路都是利用table的templet模板实现的&#xff0c;不同的在于模板代码…
阅读更多...
Linux-内存文件

Linux-内存文件

1. 基础IO操作 1.1 c语言的IO接口 fopen&#xff1a;打开一个文件&#xff0c;按照指定方式 参数&#xff1a;filename 文件名&#xff0c;也可以是路径&#xff0c;mode&#xff1a;打开方式 返回打开的文件指针 fread&#xff1a;从指定流中读数据 参数&#xff1a;从FIL…
阅读更多...
Vuex 的原理

Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store&#xff08;仓库&#xff09;。“store” 基本上就是一个容器&#xff0c;它包含着你的应用中大部分的状态 ( state )。 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的…
阅读更多...
没有理由不加倍努力

没有理由不加倍努力

最近su7很火&#xff0c;各隐藏大佬都纷纷从后台来到前台&#xff0c;把整个网红界的网红等级提升了好几个档次。红衣大叔更是借此机会在疯狂地打造自己的网红IP。 千亿大佬都这还般努力&#xff0c;作为平民的自己哪还有不努力的理由。 加倍努力&#xff01;
阅读更多...
最新文章

Copyright @ 2022~2023