webpack-babel2

news2024/12/23 7:10:17

浏览器的兼容性问题

浏览器的兼容性问题不知包括随屏幕大小而变化，还包括针对浏览器支持的特性（如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

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

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

相关文章

将城市名称替换成简写

将城市名称替换成简写

图片左边是城市全称&#xff0c;右边是城市简写。 现在有一句话“this is Republic of Korea,that is United States of America”&#xff0c;要将其中的城市全称替换成城市简写。 #"Republic of Korea"替换成 South Korea s"this is Republic of Korea,that …
阅读更多...
三、Flask模型基础

三、Flask模型基础

ORM 创建模型 # exts.py&#xff1a;插件管理 # 扩展的第三方插件 # 1.导入第三方插件 from flask_sqlalchemy import SQLAlchemy # ORM插件 from flask_migrate import Migrate # 2. 初始化 db SQLAlchemy() # ORM migrate Migrate() # 数据迁移 # 3. 和app对象绑定 def…
阅读更多...
生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证，打造物联网实时数据生态

生态短讯 | Tapdata 与 TDengine 完成产品兼容性互认证，打造物联网实时数据生态

近月&#xff0c;深圳钛铂数据有限公司&#xff08;以下简称钛铂数据&#xff09;自主研发的实时数据平台&#xff08;Tapdata Live Data Platform&#xff09;与北京涛思数据科技有限公司&#xff08;以下简称涛思数据&#xff09;自主研发的大数据平台 TDengine&#xff0c;已…
阅读更多...
SpringBoot集成Sleuth

SpringBoot集成Sleuth

引入Maven依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-sleuth</artifactId></dependency> 配置yml文件 bootstrap.yml文件增加如下配置 注&#xff1a;这个配置不是必须要&#…
阅读更多...
WordPress SQLite Docker 镜像封装细节

WordPress SQLite Docker 镜像封装细节

为了让大家用的放心&#xff0c;同时解答 GitHub 社区中的疑问。这篇文章聊聊上一篇文章的 Docker 容器封装细节。 写在前面 在前一篇文章《WordPress 告别 MySQL&#xff1a;Docker SQLite WordPress》中&#xff0c;如果你跟着文章实践&#xff0c;大概三分钟就能够启动一个…
阅读更多...
（三）组合特征与特征变换 学习简要笔记 #机器学习特征工程 #CDA学习打卡

（三）组合特征与特征变换 学习简要笔记 #机器学习特征工程 #CDA学习打卡

目录 一. 统计及组合特征 1&#xff09;统计特征 2&#xff09;业务特征 3&#xff09;组合特征 &#xff08;a&#xff09;简单组合特征 &#xff08;b&#xff09;模型特征组合 二. 特征变换 1&#xff09;对数变换&#xff08;Logarithmic Transformation&#xff0…
阅读更多...
KingbaseES存储过程的用法

KingbaseES存储过程的用法

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 存储过程是一种强大的数据库编程工具&#xff0c;可以帮助开发人员实现复杂的业务逻辑和数据操作&#xff0c;用于提高数据库的性能、安全性和可维护性。 存储过程一般是将业务逻辑和数据操作封装起来&#xff0c;以便…
阅读更多...
深度学习之图像分割从入门到精通——基于unet++实现细胞分割

深度学习之图像分割从入门到精通——基于unet++实现细胞分割

模型 import torch from torch import nn__all__ [UNet, NestedUNet]class VGGBlock(nn.Module):def __init__(self, in_channels, middle_channels, out_channels):super().__init__()self.relu nn.ReLU(inplaceTrue)self.conv1 nn.Conv2d(in_channels, middle_channels, …
阅读更多...
Redis底层数据结构之SDS

Redis底层数据结构之SDS

目录 一、概述二、SDS结构三、为什么使用SDS 下一篇 redis底层数据结构之ziplist 一、概述 Redis 中的 SDS&#xff08;Simple Dynamic String&#xff0c;简单动态字符串&#xff09;是 Redis 用于存储字符串值的底层实现&#xff0c;是对 C 语言传统字符串&#xff08;以 nu…
阅读更多...
如何使用 Node.js 发送电子邮件全解和相关工具推荐

如何使用 Node.js 发送电子邮件全解和相关工具推荐

大多数Web应用程序都需要发送电子邮件。它可能用于注册、密码重置、状态报告&#xff0c;甚至是完整的市场营销活动&#xff0c;如新闻和促销。本教程解释了如何在Node.js中发送电子邮件&#xff0c;但其概念和挑战适用于您正在使用的任何系统。 你会在 npm 上找到大量与电子邮…
阅读更多...
深度图转点云

深度图转点云

一、理论分析 二、其他分析 1、相机内参 相机内参主要是四个参数fx,fy,u0,v0。要明白相机内参就是相机内部参数&#xff0c;是参考像素坐标系而言&#xff0c;有了这个前提&#xff0c;这四个参数也就很好理解了。 &#xff08;1&#xff09;首先&#xff0c;。其中F是相机的…
阅读更多...
内存管理下及模板初阶

内存管理下及模板初阶

嗨喽&#xff0c;今天阿鑫给大家带来内存管理下以及模板初阶的博客&#xff0c;下面让我们开始今天的学习吧&#xff01; 内存管理下及模板初阶 new和delete的实现原理定位new表达式(placement-new)常见面试题泛型编程函数模板类模板 1. new和delete的实现原理 1.1 内置类型…
阅读更多...
上位机工作感想-从C#到Qt的转变-1

上位机工作感想-从C#到Qt的转变-1

0.前言 接触Qt开发也有一年多的时间了&#xff0c;还记得去年初从杭州回合肥时&#xff0c;刚来公司面临的几个问题&#xff1a; 1.C#转上位机的迷茫2.新公司管理模式的差异3.试用期的各种紧急任务。 当时也是加班加点学习C和Qt的基础知识&#xff0c;做了两个考核项目后&am…
阅读更多...
Hadoop——Yarn 生产环境核心参数

Hadoop——Yarn 生产环境核心参数

1. ResourceManager 相关参数&#xff1a; yarn.resourcemanager.hostname&#xff1a;ResourceManager 的主机名。yarn.resourcemanager.webapp.address&#xff1a;ResourceManager 的 Web 应用程序地址。yarn.resourcemanager.scheduler.address&#xff1a;ResourceManage…
阅读更多...
MB21屏幕增强

MB21屏幕增强

MB21 增强 一、屏幕抬头增强 需要在屏幕的抬头添加两个字段&#xff0c;并将字段保存至自建表 二、增强步骤 首先屏幕中的收货字段找到对应的屏幕为0521。 在对应的屏幕添加增强的字段&#xff1a;命名需要和对应的表名一样 根据需求&#xff0c;增强只针对预留中的异动…
阅读更多...
华为机考入门python3--（16）牛客16-购物单最大满意度

华为机考入门python3--（16）牛客16-购物单最大满意度

分类&#xff1a;动态规划&#xff0c;组合&#xff0c;最大值&#xff0c;装箱问题 知识点&#xff1a; 生成递减数 100, 90, 80, ..., 0 range(100, -1, -10) 访问列表的下标key for key, value in enumerate(my_list): 动态规划-捆绑装箱问题 a. 把有捆绑约束的物…
阅读更多...
SpringMvc的核心组件和执行流程

SpringMvc的核心组件和执行流程

一、 springmvc的核心组件及作用 1.DispatcherServlet:前置控制器&#xff0c;是整个流程控制的核心&#xff0c;用来控制其他组件的执行&#xff0c;降低了其他组件的耦合性 2.Handler:控制器&#xff0c;完成具体的业务逻辑&#xff0c;当DispatcherServlet接收到请求后&am…
阅读更多...
力扣70：爬楼梯（经典动态规划）

力扣70：爬楼梯（经典动态规划）

题目 解题思路 考虑动态规划&#xff0c;dp[i]表示爬到第i层的方法种数&#xff0c;对于第i层&#xff0c;可以从第i-2层爬两个台阶到达&#xff0c;也可以从i-1层爬一个台阶到达&#xff0c;故dp[i]dp[i-1]dp[i-2]&#xff0c;输出dp[n]即为答案 代码 #include<iostream…
阅读更多...
CSS——高级选择器

CSS——高级选择器

层次的选择器&#xff1a; <1> 后代选择器&#xff1a; 格式&#xff1a; 标签1 标签2{} 解释&#xff1a; 标签1 不生效&#xff0c;被标签1 嵌套中的 标签2才生效 举例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charse…
阅读更多...
利用fft算法理解频率和像素变化率的关系

利用fft算法理解频率和像素变化率的关系

算法我就不贴了。算法就是算法导论的内容。 我直接写推导过程。 假设变化率为f(n1)-f(n) 首先计算二进制数&#xff0c;这里我假设为3位二进制。 例如:f(5)-f(4)&#xff0c; 5和4的二进制为101,100。所以逆序数为101&#xff0c;001 101对应的频率为5, 001对应的频率为1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023