babel兼容低版本游览器

文章目录

    • 1. webpack项目的搭建
    • 2. babel 命令行使用
    • 3. babel的预设与编译器流程
    • 4. babel项目中配置
      • 4.1 babel-loader与插件的使用
      • 4.2 `babel-preset`使用
    • 5. 游览器兼容性使用
      • 5.1 browserslist工具与编写规则
      • 5.2 browserslist配置
      • 5.3 优化babel的配置文件
    • 6. `polyfill`
      • 6.1 useBuiltIns属性设置

1. webpack项目的搭建

  1. npm init 初始化项目,并一路回车
│  └─ package.json
  1. webpack与webpack-cli 安装

    执行命令 npm i webpack webpack-cli -D

│  ├─ package.json
│  ├─ node_modules // webpack-cli创建
  1. 安装编译模板并配置入口和出口文件
  1. 安装编译模板 npm i html-webpack-plugin

项目结构

│     ├─ build 
│     │  ├─ build.js
│     │  └─ index.html
│     ├─ node_modules
│     └─ src
│        ├─ index.js | main.js
│     ├─ index.html // 入口文件
|     ├─ package.json
|     ├─ webpack.config.js	
  • 配置 webpack.config.js 新建入口文件index.js, 出口文件 build
const path = require('path')
// 模板编译
const HtmlWeabpckPlugin = require("html-webpack-plugin")
module.exports = {mode: 'development',devtool: false,   // 取消eval且不生成soucremap,代码清晰不转换entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',// 重新打包时, 先将之前打包的文件夹删除掉clean: true},resolve: {extensions: ['.js', '.json', '.wasm', '.jsx', '.ts']},module: {},plugins: [new HtmlWeabpckPlugin({template: "./index.html"})]
}
  • 修改package.json 打包命令
  "scripts": {"build":"webpack"},
  1. 配置webpack-dev-server 热更新

安装 npm i webpack-dev-server -D

修改package.json

 "scripts": {"build": "webpack","serve": "webpack serve"},

2. babel 命令行使用

  • babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用
  • 如果要在命令行尝试使用babel,需要安装库
    • @babel/core:babel的核心代码,必须安装;
    • @babel/cli:可以让我们在命令行使用babel;
 安装 npm install @babel/cli @babel/core
  1. 使用babel来处理写的ES6代码
   src:是源文件的目录;--out-dir:指定要输出的文件夹dist;npx babel src --out-dir dist
  • 执行 npx babel ./src/index.js --out-dir dist

会发现代码输出到dist 文件夹了,但是并没有进行降级

在这里插入图片描述

  • 上述代码没有降级是因为babel在这里只进行了抽象语法解析
  • 如果要想对代码进行降级必须使用插件 plugin

安装插件 npm install @babel/plugin-transform-block-scoping -D

  • 在执行命令 npx babel ./src/index.js --out-dir dist --plugins=@babel/plugin-transform-block-scoping
  • 这时就会把es6 代码中的const 转换为var
    在这里插入图片描述

3. babel的预设与编译器流程

  • 上面代码中可以实现es6转es5 ,但是要转换的内容过多,一个个设置是比较麻烦的,这时就可以使用预设(preset)
  1. 安装 npm install @babel/preset-env -D
  2. 使用 npx babel ./src/index.js --out-dir dist --presets=@babel/preset-env
  • 代码中的转换并自动开启严格模式
    在这里插入图片描述
  • babel的底层原理解析 github解析

4. babel项目中配置

4.1 babel-loader与插件的使用

  • 在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中。
  1. 安装依赖 npm install babel-loader @babel/core
  2. 在webpack中配置与指定插件
  • 添加配置
module: {rules: [{test: /\.m?js$/,use: {loader: "babel-loader",options:{plugins: ["@babel/plugin-transform-block-scoping",]}}}]},

在这里插入图片描述

4.2 babel-preset使用

  • 上述代码中单独配置太麻烦了,可以直接给webpack提供一个presetwebpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel
  • 安装 npm install @babel/preset-env

  • 修改plugin中的配置
	rules: [{test: /\.m?js$/,use: {loader: "babel-loader",options: {presets:[["@babel/preset-env"]]}}}]

5. 游览器兼容性使用

  • 代码的要不要转换取决于适配的游览器
  • bowserlistrc 文件解析
    在这里插入图片描述
> 0.05%   表示现在使用的游览器市场占有率   (这里默认值是0.5%, 0.1%可兼容谷歌游览器79 )
last 2 versions     表示最近的两个版本
not dead     //表示最近24个月浏览器是否进行更新
  • 使用命令 npx browserslist 可查看兼容的浏览器
  • 游览器市场占有率 : 使用的游览器占有率

5.1 browserslist工具与编写规则

  • browserslist工具可以在css兼容性和js兼容性下共享我们配置的兼容性条件
  • 当设置了一个条件: > 1%;的意思是css要兼容市场占有率大于1%的浏览器,js也要兼容市场占有率大于1%的浏览器
  • Browserslist是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置
    • Autoprefixer
    • babel
    • postcss-normalize
  • 编写规则
    在这里插入图片描述
    在这里插入图片描述
  • 命令行使用browserslist

npx browserslist ">1%, last 2 version, not dead"

5.2 browserslist配置

  1. 可以在package.json配置
  2. .browserslistrc文件中配置
> 5%
last 2 versions
not dead

在这里插入图片描述

  • 多个配置的条件关系
    在这里插入图片描述
  • 注意多个游览器兼容配置生效规则
  • 在这里配置的target 会直接覆盖掉browserslistrc文件的配置
		rules: [{test: /\.m?js$/,use: {loader: "babel-loader",options: {presets: [["@babel/preset-env",{targets: ">5%"}]]}}}]

5.3 优化babel的配置文件

  • 现在的项目是将babel的配置信息放到一个独立的文件中,babel给我们提供了两种配置文件的编写:

    • babel.config.json(或者.js,.cjs,.mjs)文件;
    • babelrc.json(或者.babelrc,.js,.cjs,.mjs)文件;
  • 它们两个有什么区别呢?目前很多的项目都采用了多包管理的方式(babel本身、element-plus、umi等)

    • .babelrc.json:早期使用较多的配置方式,但是对于配置Monorepos项目是比较麻烦的
    • babel.config.json(babel7):可以直接作用于Monorepos项目的子包,更加推荐;
  • json与js的文件配置只是写法不同而已,功能一致
module.exports = {presets: [["@babel/preset-env", {}]]
}

6. polyfill

  • polyfill 其实就是给代码打一个补丁,可以帮助我们更好的使用JavaScript;
  • 为什么时候会用到polyfill呢?
    • 比如我们使用了一些语法特性(例如:Promise, Generator, Symbol等以及实例方法例如Array.prototype.includes等
    • 但是某些浏览器压根不认识这些特性,必然会报错;
      在这里插入图片描述

注意点babel7.4.0之前,可以使用 @babel/polyfill的包,但是该包现在已经不推荐使用了

  • babel7.4.0之后,可以通过单独引入core-js和regenerator-runtime来完成polyfill的使用:

npm install core-js regenerator-runtime --save

  1. 配置babel.config.js
    • useBuiltIns:设置以什么样的方式来使用polyfill;
    • corejs:设置corejs的版本,目前使用较多的是3.x的版本,比如我使用的是3.8.x的版本;
      • 另外corejs可以设置是否对提议阶段的特性进行支持;
      • 设置 proposals属性为true即可;

6.1 useBuiltIns属性设置

  1. fasle值 ,不设置默认值
    • 打包后的文件不使用polyfill来进行适配; 并且这个时候是不需要设置corejs属性的;
  2. usage
    • 会根据源代码中出现的语言特性,自动检测所需要的polyfill; 这样可以确保最终包里的polyfill数量的最小化,打包的包相对会小一些;
  • 不设置
    在这里插入图片描述
  • 设置
    在这里插入图片描述
  1. entry
    • 如果要依赖的某一个库本身使用了某些polyfill的特性,但是因为我们使用的是usage,所以之后用户浏览器可能会报错; 就可以使用 entry
// 入口文件引入
import 'core-js/stable';
import 'regenerator-runtime/runtime';
  • 完整配置
module.exports = {presets: [["@babel/preset-env", {// corejs:3,// useBuiltIns:false   // 默认值就是不使用polyfill// corejs:3,// useBuiltIns:"usage"   //自动检测需要的polyfill, 会把使用string的方法代码全部做个打包corejs: 3,useBuiltIns: "entry" // 解决 依赖的某一个库本身使用了某些polyfill的特性//  需要在入口文件中添加 `import 'core-js/stable'; import 'regenerator-runtime/runtime'}]]
}
  • 项目完整目录
│     ├─ build 
│     │  ├─ build.js
│     │  └─ index.html
|     ├─ dist 
│     ├─ node_modules
│     └─ src
│        ├─ index.js | main.js
│     ├─ index.html // 入口文件
|     ├─ package.json
|     ├─ webpack.config.js	
|     ├─.browserslistrc
|     ├─ babel.config.js

参考文章

  • coderwhy
  • jcat_李小黑
  • DevHappy
  • github browserslist
  • 附加,vue2项目升级到vue3项目执行打包时,build执行两遍
  • 项目地址

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

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

相关文章

Flutter——最详细(NavigationRail)使用教程

NavigationRail 简介 一个 Material Design 小部件,旨在显示在应用程序的左侧或右侧,以便在少量视图(通常在三到五个视图之间)之间导航。 使用场景: 通过Row属性,左侧或右侧菜单栏按钮 属性作用onDestinati…

Halcon机器视觉-15种常用缺陷检测实例

一、Halcon 15种常用缺陷检测实例分享 缺陷检测是一种通过计算机视觉技术来检测产品制造过程中的缺陷的方法。该技术可以检测出产品表面的缺陷,如裂纹、凹陷、划痕、气泡等,并且可以实时监测和诊断制造过程中的问题。在制造业中,机器视觉缺陷…

GRE实验

题目参考&#xff1a; 实验步骤&#xff1a; 第一步&#xff1a;地址规划拓扑设计&#xff0c;配置IP地址 R1配置&#xff1a; <Huawei>system-view [Huawei]sy R1 [R1]int g 0/0/1 [R1-GigabitEthernet0/0/1]ip address 192.168.1.1 24 [R1-GigabitEthernet0/0/1]in…

智能电表数据采集器

智能电表数据采集器是一种用于采集智能电表数据的设备&#xff0c;它可以将智能电表的数据传输到远程服务器上&#xff0c;以便进行数据分析和监控。智能电表数据采集器的主要功能是采集智能电表的实时数据&#xff0c;并将其发送到远程服务器上&#xff0c;从而实现对智能电表…

【windows测试通过】关于Godot导入外部音频文件的问题

file.open(filepath, file.READ) var buffer file.get_buffer(file.get_len()) #put data into audiostreamsample var stream AudioStreamSample.new() stream.data buffer 代码给出&#xff0c;还没有测试过。(godot3.2测试未通过&#xff09; 在运行时轻松加载外部音频…

业务安全分析第19期 | 今年暑假,博物馆的门票为什么抢不到?

目录 “黄牛”&#xff1a;加价代预约、加价售票、兜售野导游套餐 “黄牛”倒票带来的危害 “黄牛”为什么能够抢到票 博物馆与“黄牛”的门票攻防 “黄牛”使用的作弊软件有什么特征 技术上防范“黄牛”的作弊软件抢票 遏制“黄牛”倒票给博物馆带来的收益 随着暑期参观…

[nlp] GPT

一、联合训练任务 1.1 NTP(Next Token Prediction) gpt预训练的一个目标函数有两个,第一个是基础的下一个词预测任务,选择一个K窗口,将窗口中的K个词的embedding作为条件去预测下一个词。 1.2 TC(Text Classification) 第二个是一个分类任务,一段话给一个标签,然后去预…

离线数据仓库

一、数据仓库 1.数据仓库的概念 1)数据仓库的特点: 面向主题的:对数据进行整合、分析和归类的抽象集成的:将不同数据源的数据(业务数据、外部系统数据、埋点日志)经过统一编码、规范命名、字段类型转换等操作,整合到仓库相对稳定的:根据业务场景实时更新、一般会被长…

VIM文本如何复制到系统剪切板?

今天从vim上用鼠标复制代码&#xff0c;发现把VIM当中的行号也复制进去了&#xff0c;就很麻烦&#xff0c;于是简单研究了下&#xff0c;如果vim支持clipboard的话就比较好办&#xff0c;具体支持与否&#xff0c;使用命令查看&#xff1a; vim --version | grep "clipb…

startqueue(模拟实现及底层原理)

目录 容器适配器 STL标准库中stack和queue的底层结构 ​deque deque的原理 deque的缺陷 为什么选择deque作为stack和queue的底层默认容器 stack stack的介绍 stack的函数 stack的模拟实现 queue queue的介绍 queue的函数 queue的模拟实现 priority_queue prior…

Android中线程池

一、线程池的优点 说到线程池的优点就要先说一下不用线程池的坏处 在早些年开发都是直接new Thread()直接创建线程&#xff0c;倘若有N个异步就要创建N个线程&#xff0c;这会导致线程的频繁创建和销毁线程不可控&#xff0c;每个线程都各自执行&#xff0c;内存资源竞争激烈&…

js小写金额转大写 自动转换

// 小写转为大写convertCurrency(money) {var cnNums [零, 壹, 贰, 叁, 肆, 伍, 陆, 柒, 捌, 玖]var cnIntRadice [, 拾, 佰, 仟]var cnIntUnits [, 万, 亿, 兆]var cnDecUnits [角, 分, 毫, 厘]// var cnInteger 整var cnIntLast 元var maxNum 999999999999999.9999var…

Leetcode-每日一题【19.删除链表的倒数第N个结点】

题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1输出&#xff1a;[] 示例 3&#x…

数据结构day5(2023.7.19)

一、Xmind整理&#xff1a; 双向链表的插入与删除&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;单链表任意元素删除 /** function: 按元素删除* param [ in] * param [out] * return 返回堆区首地址*/ Linklist delete_by_data(datatype key,Linklist L) …

Unity Obfuscator

官方仓库 学习日期&#xff1a;2023-07-13&#xff08;防止后续仓库特性或功能更新无对比时间&#xff09; 目标&#xff1a;本文介绍使用此github库&#xff0c;混淆unity项目的代码&#xff0c;在ILSpy中无法正确反编译。 一、说明 官方说明 配置界面 Features: ControlFlow…

springboot整合feign实现RPC调用,并通过Hystrix实现服务降级

目录 一、服务提供者 二、服务消费者 三、测试效果 四、开启Hystrix实现服务降级 feign/openfeign和dubbo是常用的微服务RPC框架&#xff0c;由于feigin内部已经集成ribbon&#xff0c;自带了负载均衡的功能&#xff0c;当有多个同名的服务注册到注册中心时&#xff0c;会根…

SpringBoot中集成jasypt-spring-boot实现配置文件数据加密脱敏

场景 经常会遇到这样一种情况&#xff1a;项目的配置文件中总有一些敏感信息&#xff0c;比如数据源的url、用户名、 密码....这些信息一旦被暴露那么整个数据库都将会被泄漏&#xff0c;那么如何将这些配置隐藏呢。 除了使用手动将加密之后的配置写入到配置文件中&#xff…

紧跟国家“新能源+”模式!涂鸦智慧能源方案助力夏季用电节能提效

“今天的你是几分熟&#xff1f;” 今年夏天&#xff0c;高温来得比往年更早&#xff0c;五六月份就提前开启了滚滚热浪模式&#xff0c;京津冀和山东等地最高气温也一度突破了历史极值。在提前到来的高温“烤”验下&#xff0c;全社会供电能力面临着极大挑战。 中国电力网预…

Spring

getBean()方法使用 其中&#xff0c;当参数的数据类型是字符串时&#xff0c;表示根据Bean的id从容器中获得Bean实例&#xff0c;返回是Object&#xff0c;需要强转。 当参数的数据类型是Class类型时&#xff0c;表示根据类型从容器中匹配Bean实例&#xff0c;当容器中相同类型…

手机定屏死机问题操作指南

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、定屏死机问题抓取 Log 要求二、 复现定屏死机问题后做什么三、检查adb是否可连的方法四、连接adb 抓取以下Log五、如果adb不可连&#xff0c;执行下…