babel的配置执行顺序

 babel配置文件:

//.babelrc
{"presets": ["@babel/preset-env","@babel/preset-react"],"plugins": ["@babel/plugin-proposal-class-properties",["@babel/plugin-transform-runtime",{"corejs": {"version": 3,"proposals": true},"helpers": true,"regenerator": true}],["import",{"libraryName": "antd"},"antd"],["import",{"libraryName": "lodash","libraryDirectory": "","camel2DashComponentName": false},"lodash"]]
}

业务代码:

import _ from 'lodash';//枚举翻译valToText = () => {const { customeName, useColField, quantOption, children, record, uikey } = this.props;// 自定义按钮文案if (customeName) {// 使用列字段if (useColField && !_.isEmpty(uikey)) {return _.get(record, uikey, '');}// 使用数据字典if (_.isArray(quantOption) && !_.isEmpty(uikey)) {const currentOption = _.find(quantOption, ({ value }) => record[uikey] === value);const text = _.get(currentOption, 'name', record[uikey]);return text;}}return children;}

对业务代码打包:

"build": "babel _components --out-dir dist --ignore \"**/*.test.js\" --copy-files",

打包后的文件运行报错:find函数调用报错

对应打包代码: 

  find函数打印如下:后面括号的_报错

_.find()和[].find,即把_当成了数组处理,所以数组的find函数调用后是(0, _find2.default)([])

(0, _find2.default)(_)

如下其他lodash函数正常,find函数被babel处理polyfill,将find当成了数组的findpolyfill了


修改find函数引入

import _, { find } from 'lodash';

 打包后正常:

var _find3 = _interopRequireDefault(require("lodash/find"));

Babel配置说明:

presets与plugins同时存在的执行顺序

1. plugins运行在presets之前;

2. plugins配置项,按照声明顺序执行,从第一个到最后一个;

3. presets配置项,按照声明逆序执行,从最后一个到第一个(主要是为了确保向后兼容)

stage-x:指处于某一阶段的js语言提案
  • Stage 0 - 设想(Strawman):只是一个想法,可能有 Babel插件。
  • Stage 1 - 建议(Proposal):这是值得跟进的。
  • Stage 2 - 草案(Draft):初始规范。
  • Stage 3 - 候选(Candidate):完成规范并在浏览器上初步实现。
  • Stage 4 - 完成(Finished):将添加到下一个年度版本发布中

stage-x的参数列表请参考:https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

babel7中删除了"stage-x"的预设;建议使用env,代替 es2015、es2016、es2017预设

解决:

所以上面babelrc中配置,先执行了@babel/plugin-transform-runtime 误将_.find当成了数组处理,之后在按需加载lodash,顺序错误,应该先引入lodash的find之后再执行polyfill,就不会误处理。

"plugins": ["@babel/plugin-proposal-class-properties",["import",{"libraryName": "antd"},"antd"],["import",{"libraryName": "lodash","libraryDirectory": "","camel2DashComponentName": false},"lodash"],["@babel/plugin-transform-runtime",{"corejs": {"version": 3,"proposals": true}}]]

直接写 import _ from 'lodash';import { isEqual } from 'lodash'; 引入的是整个 Lodash 包,约 70kb 左右(压缩后)

import isEqual from 'lodash/isEqual'; 引入的单个使用到的文件,约 15kb 左右(压缩后)。

项目开发时,要注意按需加载,减少代码体积,lodash引入问题,新项目推荐使用 lodash-es 包,因为这可以省去 babel 编译的时间。

老项目存在替换成本,可以使用babel-plugin-lodash或上面的babel-plugin-import实现按需加载。

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

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

相关文章

计算机专业毕业设计项目推荐09-个人医疗系统(Spring+Js+Mysql)

个人医疗系统(SpringJsMysql) **介绍****系统总体开发情况-功能模块****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及…

智慧公厕自动化保洁系统,让公共厕所实现7*24 持续整洁

随着科技的不断进步,越来越多的创新方案应用于各个领域,公共厕所的智慧化也不例外。本文重点介绍智慧公厕源头厂家广州中期科技有限公司,大量案例项目中所使用的智慧公厕自动化保洁系统,能有效地节省人力,并保持公共厕…

网络安全,weblogic漏洞复现

WebLogic是美国Oracle公司出品的一个Java应用服务器,是一个基于JAVAEE架构的中间件,用于开发、集成、部署和管理大型分布式Web应用、网络应用和数据库应用。 2|0弱口令登陆部署shell文件 App Weblogic Path weblogic/weak_password 2|1介绍 用户管理…

广东电信和中兴开通首个50G PON万兆入企啦!

最近广东电信和中兴在深圳市南山科技园成功开通了首个50G PON万兆入企应用,双方将携手打造50G PON万兆入企的示范应用样板工程和产业园区,看来“万兆入企,助力深圳打造全球数字先锋城市”的目标是指日可待了。 深圳在2022年发布了《深圳市推进…

数据库管理工具DBeaverUltimate mac中文高级功能

DBeaver Ultimate mac是一款数据库管理工具,支持多种数据库,包括MySQL、Oracle、PostgreSQL、SQLite、Microsoft SQL Server等。它提供了一个直观的用户界面,使用户可以轻松地管理和查询数据库,包括创建和修改表、执行SQL查询、导…

面试官的几句话,差点让我挂在HTTPS上

♥ 前 言 作为软件测试,大家都知道一些常用的网络协议是我们必须要了解和掌握的,比如 HTTP 协议,HTTPS 协议就是两个使用非常广泛的协议,所以也是面试官问的面试的时候问的比较多的两个协议;而且因为这两个协议有相…

如何使用php提取文章中的关键词?PHP使用Analysis中英文分词提取关键词

1、下载Analysis&#xff0c;创建test.php测试 2、引入Analysis实现中文分词 <?php include "./Analysis/Analysis.php";$annew \WordAnalysis\Analysis(); $content"机器学习是一门重要的技术&#xff0c;可以用于数据分析和模式识别。"; //10分词数…

Goby 漏洞发布|Revive Adserver 广告管理系统 adxmlrpc.php 文件远程代码执行漏洞(CVE-2019-5434)

漏洞名称&#xff1a;Revive Adserver 广告管理系统 adxmlrpc.php 文件远程代码执行漏洞&#xff08;CVE-2019-5434&#xff09; English Name&#xff1a; Revive Adserver adxmlrpc.php Remote Code Execution Vulnerability (CVE-2019-5434) CVSS core: 9.0 影响资产数&a…

配置pytorchGPU虚拟环境-python3.7

cuda版本的pytorch包下载地址戳这里 winR->输入cmd->输nvcc -V回车 cuda 11.0 输入以下命令来查找 CUDA 的安装路径&#xff1a; Windows: where nvcc 输入以下命令来查找 cuDNN 的版本号&#xff1a; Windows: where cudnn* cuDNN 8.0 本机安装的是cuda 11.0&…

MySQL - 关于约束类型和作用的介绍

约束的概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 约束的作用&#xff1a;用于保证数据库中数据的正确性、完整性和一致性。 约束分类&#xff1a; 约束类型作用关键字非空约束限制该字段的数据不能为nullnot null唯一约束保证该…

【深度学习-第3篇】使用MATLAB快速实现CNN分类(模式识别)任务,含一维、二维、三维数据演示案例

在本文中&#xff0c;我们将介绍如何使用 MATLAB 中的 Convolutional Neural Network&#xff08;CNN&#xff09;进行分类任务。我们将使用 MATLAB 的 Deep Learning Toolbox 来创建、训练和评估 CNN。 一、一个简单的案例 1 安装和准备 首先&#xff0c;确保已安装 MATLAB…

基于SSM的高校图书馆个性化服务的设计与实现(有报告)。Javaee项目。

演示视频&#xff1a; 基于SSM的高校图书馆个性化服务的设计与实现&#xff08;有报告&#xff09;。Javaee项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过S…

HarmonyOS 4.0 实况窗上线!支付宝实现医疗场景智能提醒

本文转载自支付宝体验科技&#xff0c;作者是蚂蚁集团客户端工程师博欢&#xff0c;介绍了支付宝如何基于 HarmonyOS 4.0 实况窗实现医疗场景履约智能提醒。 1.话题背景 8 月 4 日&#xff0c;华为在 HDC&#xff08;华为 2023 开发者大会&#xff09;上推出了新版本操作系统…

003:如何画出成交量的柱状图

接着《002&#xff1a;如何画出收盘价的曲线图》&#xff0c;继续画成交量柱状图。 import pandas as pd import matplotlib.pyplot as plt# 读取CSV文件&#xff0c;指定逗号作为分隔符 data pd.read_csv(002885.csv, sep,)# 提取成交量和日期数据 volume data[成交量] dat…

物联网开发自学的一些建议

物联网开发自学的一些建议 目前为止有一年多的时间了。开发了一些小的应用。和做了一些项目。当然也放弃了一些项目。学习到新的知识&#xff0c;了解到新的器件&#xff0c;认识新的朋友。同时也获得了部分的收入。最近很多小伙伴找我&#xff0c;说想要一些物联网学习资料&am…

腾讯mini项目-【指标监控服务重构】2023-08-27

今日已办 Docker Monitoring with cAdvisor, Prometheus and Grafana Docker Monitoring with cAdvisor, Prometheus and Grafana | by Mertcan Simsek | MediumMonitoring Docker container metrics using cAdvisor | Prometheus prometheus.yml global:scrape_interval: …

Linux基础知识 总结

Linux基础知识 总结 1、Clion的简单介绍 CLion是以IntelliJ为基础&#xff0c;专为开发C及C所设计的跨平台IDE&#xff0c;可以在Windows、Linux及MacOS使用&#xff0c;这里我是在ubuntu 16.0.4基础上安装。2、下载 Linux版Clion的.tar.gz的压缩包 wget https://download.j…

修炼k8s+flink+hdfs+dlink(一:安装hdfs)

一&#xff1a;安装jdk&#xff0c;并配置环境变量。 在对应的所有的节点上进行安装。 mkdir /opt/app/java cd /opt/app/java wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24http%3A%2F%2Fwww.oracle.com% 2F; oraclelicenseaccept-securebackup…

flask_apscheduler实现定时推送飞书消息

需求场景&#xff1a; 实现一个flask服务&#xff0c;通过接口控制一个定时任务任务&#xff08;对酒店订房情况进行检查&#xff09;的开启和停止。要求定时任务完成后&#xff0c;可以通过飞书机器人推送任务完成的消息。 展现效果&#xff1a; 启动定时任务 关闭定时任务…

ssl证书 阿里的域名,腾讯云的证书

目录 1.腾讯云申请ssl免费证书 2.去阿里云进行解析 3.回到腾讯云 4.nginx的配置 说明&#xff1a;阿里云的免费证书用完了&#xff08;每年可以申请20个&#xff09;&#xff0c;还有个项目要用证书&#xff0c;第三方的证书免费的都是90天的。看了下腾讯云业可以申请免费的…