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 version
 not dead

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据分析（1）

数据分析（1）

数据分析基础&#xff08;1&#xff09; 为了让刚开始学习的朋友对数据分析有一个清晰的整体认识&#xff0c;因此笔者在此对数分进行一个较为详细的介绍有助于大家更好的在宏观层面进行理解&#xff0c;避免在后续学习中产生迷茫。 数据分析的概念 定义&#xff1a;数据分析…
阅读更多...
Linux系统-进程和计划任务管理

Linux系统-进程和计划任务管理

一.程序和进程 1.程序 保持在硬盘、光盘等介质中的可执行代码和数据文件中静态保存的代码 2.进程 在CPU及内存中运行的程序代码动态执行的代码父、子进程每个程序可以创建一个或多个进程 3.进程特征 动态性&#xff1a;进程是程序的一次执行过程&#xff0c;是临时的&…
阅读更多...
项目小游戏-贪吃蛇

项目小游戏-贪吃蛇

目录 1.游戏开始 - GameStart 1.1cmd命令窗口 调节窗口命令 ​编辑更改窗口命名 ​编辑 1.2 Win32 API win32 API 的介绍: ​编辑 获取控制台坐标COORD 获取控制台句柄: 获取缓冲台光标信息: 获取虚拟键位: 本地初始化 setlocale(); 游戏开始的具体实现&#xff1a…
阅读更多...
Cyber Weekly #3

Cyber Weekly #3

赛博新闻 1、Meta发布最强开源模型Llama3[1] 4月19日凌晨&#xff0c;Meta Llama 3发布&#xff0c;模型包含8B和70B两种参数规模&#xff08;400B还在训练中&#xff09;&#xff0c;Llama 3使用了超过 15T token的训练数据&#xff0c;8B版本数据更新截止至2023年3月&#…
阅读更多...
属性文件出现问号，更改配置文件的编码格式

属性文件出现问号，更改配置文件的编码格式

场景 场景&#xff1a;配置了properties文件&#xff0c;结果涉及到中文的部分都是问号原因&#xff1a;因为配置文件的默认编码格式iso的&#xff0c;这种编码格式下压根没有中文解决方案&#xff1a;使用IDEA将全局编码格式设置为utf-8 第一步&#xff1a;File->Settings-…
阅读更多...
SRS WebRTC Whip 和 Whep 部署体验问题

SRS WebRTC Whip 和 Whep 部署体验问题

whip 報錯 404 webrtc推流 小窗口一闪而过&#xff0c;然后查看f12回复404的报错信息 chrome版本&#xff1a; 正在检查更新 版本 123.0.6312.123&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; centos 7.9 源码安装部署&#xff0c; 代码分支5.0 完全按…
阅读更多...
判断完数（C语言）

判断完数（C语言）

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int n 0;int i 1;int j 0;int result 1;//提示用户&#xff1b;printf("请输入一个…
阅读更多...
指针专题（3）

指针专题（3）

1.前言 本节我们书接上文&#xff0c;继续进行指针专题的学习&#xff0c;夯实指针的基础&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习 2.字符指针变量 我们知道&#xff0c;字符指针的形式为char*&#xff0c;我们可以取出一个字符的地址&#xff0c;并且…
阅读更多...
游戏测试之常见控制技能（下）

游戏测试之常见控制技能（下）

备注&#xff1a;未经博主允许禁止转载 个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_w…
阅读更多...
4月21敲一篇猜数字游戏，封装函数，void，无限循环，快去体验体验

4月21敲一篇猜数字游戏，封装函数，void，无限循环，快去体验体验

今天敲一篇猜数字游戏 目录 今天敲一篇猜数字游戏 1.打开先学goto语句&#xff1a; 2.开干&#xff1a; 首次我们学习随机数&#xff1a; 讲解一下&#xff1a; 改用srand; 加入时间变量&#xff1a; 获取时间&#xff1a;哈​编辑 3.我本来想已近够完美了&#xff0…
阅读更多...
Redis 逻辑过期策略设计思路

Redis 逻辑过期策略设计思路

引言&#xff1a; 当我们平常使用Redis缓存的时候&#xff0c;会出现一种场景&#xff0c; redis的key到过期时间了&#xff0c;总是需要到数据库里面去查一遍数据再set回redis&#xff0c;这个时候如果数据库响应比较慢&#xff0c;那么就会造成用户等待&#xff0c;如果刚好…
阅读更多...
rancher-rke2 修改--service-cluster-ip-range

rancher-rke2 修改--service-cluster-ip-range

一、场景 因为需要部署新版本的ingress-nginx&#xff0c;而部署ingress-nginx的时候需要使用hostnetowrk以及nodeport的端口为80和443&#xff0c;service-node-port-range 默认为30000开始,部署会报错。 二、产生修改的需求 1、api-servier的配置文件位置 默认是没有的&…
阅读更多...
【C++】双指针算法：移动零

【C++】双指针算法：移动零

学完了数据结构和C的STL库&#xff0c;我们需要开始学习算法了。有了前面的基础知识储备&#xff0c;再好好学习算法&#xff0c;有系统&#xff0c;有规律的刷题&#xff0c;总结&#xff0c;咱们的编程能力就会有质的飞跃&#xff01; 1.题目 我们用一个例题来讲解这个算法。…
阅读更多...
Docker - 简介

Docker - 简介

原文地址&#xff0c;使用效果更佳&#xff01; Docker - 简介 | CoderMast编程桅杆https://www.codermast.com/dev-tools/docker/docker-introduce.html Docker是什么&#xff1f; Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 D…
阅读更多...
AtCoder Beginner Contest 340

AtCoder Beginner Contest 340

前面两道阅读理解直接跳过 C - Divide and Divide 大意 黑板上有一个数。 执行下列操作&#xff0c;直到黑板上的数全为1: 选择一个不小于2的整数&#xff0c;擦掉。写下和。需要的代价。 当不能继续操作时&#xff0c;总代价是多少&#xff1f; 思路 定义表示黑板上初…
阅读更多...
nacos配置mysql（windows）

nacos配置mysql（windows）

nacos默认是使用的内置数据库derby ,可通过配置修改成mysql,修改成mysql之后&#xff0c;之前配置在derby的数据会丢失 本文使用mysql版本为8.0.22 nacos版本为2.3.1 在mysql里面先创建一个数据库test(名称自定义&#xff0c;和后面配置文件里面的一样就好了) 在上面创建的数据…
阅读更多...
6.SpringBoot 日志文件

6.SpringBoot 日志文件

文章目录 1.日志概述2.日志作用3.使用和观察日志3.1如何观察日志3.2使用日志3.3日志级别3.4日志持久化3.5日志分割 4.日志框架4.1门面模式(外观模式)4.2 SLF4J框架介绍4.3 日志格式的说明4.3.1日志名称 5.日志颜色设置6.总结 大家好&#xff0c;我是晓星航。今天为大家带来的是…
阅读更多...
C# 开源SDK 工业相机库 调用海康相机 大恒相机

C# 开源SDK 工业相机库 调用海康相机 大恒相机

C# MG.CamCtrl 工业相机库 介绍一、使用案例二、使用介绍1、工厂模式创建实例2、枚举设备&#xff0c;初始化3、启动相机4、取图5、注销相机 三、接口1、相机操作2、启动方式3、取图4、设置/获取参数 介绍 c# 相机库&#xff0c;含海康、大恒品牌2D相机的常用功能。 底层采用回…
阅读更多...
去除图像周围的0像素，调整大小

去除图像周围的0像素，调整大小

在做分割任务时&#xff0c;经常需要处理图像&#xff0c;如果图像周围有一圈0像素&#xff0c;需要去除掉&#xff0c;重新调整大小 数组的处理 如果图像的最外一圈为0&#xff0c;我们将图像最外圈的图像0去除掉。 import numpy as npdef remove_outer_zeros(arr):# 获取数…
阅读更多...
电脑缺失d3dcompiler_43.dll如何修复？多种修复dll问题的有效方法分享

电脑缺失d3dcompiler_43.dll如何修复？多种修复dll问题的有效方法分享

当用户尝试在个人计算机上运行特定的软件游戏时&#xff0c;系统弹出了一条错误提示信息&#xff0c;明确指出“d3dcompiler_43.dll”文件缺失。这个动态链接库文件(dll)是Direct3D编译器的重要组成部分&#xff0c;对于许多基于Windows操作系统的应用程序&#xff0c;尤其是那…
阅读更多...
最新文章

Copyright @ 2022~2023