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

nagios

nagios 一. 服务端安装准备二. 安装配置 nagios服务端 环境为centos8.5,记得换指令 一. 服务端安装准备 需要LNMP环境 更新源 sed -i s/enabled1/enabled0/g /etc/yum.repos.d/*[BaseOS] nameBaseOS baseurlfile:///media/cdrom/BaseOS enabled1 gpgcheck0 [AppS…

智慧公厕自动化保洁系统,让公共厕所实现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查询、导…

在springboot中整合mybatis配置流程!

在Spring Boot中整合MyBatis的配置流程分为以下几个步骤: 1. 添加依赖: 首先,您需要在项目的pom.xml文件中添加MyBatis和数据库驱动的依赖。通常,您会使用MyBatis的Spring Boot Starter依赖来简化配置。例如,如果您使…

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

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

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

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

QT之串口通信之QSerialPort和QSerialPortInfo

QT之串口通信 函数介绍例程 函数介绍 1&#xff09;QSerialPort类的一些常用方法&#xff1a; setPortName()&#xff1a;设置串口的名称。 setBaudRate()&#xff1a;设置串口的波特率。 setDataBits()&#xff1a;设置串口的数据位。 setParity()&#xff1a;设置串口的校验…

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&…

Python操作Elasticsearch

一、Python操作ES之基本使用 安装:pip3 install elasticsearch from elasticsearch import Elasticsearchobj = Elasticsearch() # 创建索引(Index) # result = obj.indices.create(index=user,ignore=400) # # print(result)# print(result) # 删除索引 # result = obj.i…

【JavaGuide学习笔记】Day.3

JAVA基础常见面试题&#xff08;中&#xff09; 1.面向对象和面向过程的区别 2.对象的实体与对象的引用有何不同&#xff1f; 3.对象相等和引用相等的区别 4.构造方法有哪些特点&#xff1f;是否可被override&#xff1f; 5.面向对象的三大特征 6.接口和抽象类有什么共同点…

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;上推出了新版本操作系统…

现代卷积网络实战系列3:PyTorch从零构建AlexNet训练MNIST数据集

&#x1f308;&#x1f308;&#x1f308;现代卷积网络实战系列 总目录 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 1、MNIST数据集处理、加载、网络初始化、测试函数 2、训练函数、PyTorch构建LeNet网络 3、PyTorch从零构建AlexNet训练MNIST数据…

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…