babel的配置执行顺序

news2025/4/26 2:54:54

 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.coloradmin.cn/o/1042243.html

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

相关文章

R | R及Rstudio安装、运行环境变量及RStudio配置

R | R及Rstudio安装、运行环境变量及RStudio配置 一、介绍1.1 R介绍1.2 RStudio介绍 二、R安装2.1 演示电脑系统2.2 R下载2.3 R安装2.4 R语言运行环境设置(环境变量)2.4.1 目的2.4.2 R-CMD测试2.4.3 设置环境变量 2.5 R安装测试 三、RStudio安装3.1 RStu…

Windows下conda安装pytorch GPU版

1.安装miniconda,不细讲了,自己去百度,miniconda自带python,可以通过conda创建虚拟python环境,安装Pytorch的话建议python版本大于3.8,完成后注意配置环境变量。 2.安装CUDA: 查看自己CUDA版本,Nvidia控制面板中找,不再赘述。根据查看的版本,下载 CUDA Toolkit并安装…

ChatGPT重磅升级:可以看图、听声音、说话啦!

美东时间9月25日,OpenAI在官网宣布,对ChatGPT进行重磅升级实现看图、听声音、输出语音内容三大功能。 早在今年3月OpenAI发布GPT-4模型时,就展示过看图的功能,但由于安全、功能不完善等原因一直没有开放。现在不仅开放了看图&…

《玩转smardaten | 无代码开发移动端APP需要几步?最全操作!》

看完这么多免编程、无代码APP软件开发的文章,还是一脸茫然😮...只讲能开发出什么玩意,不讲到底怎么开发,我怎么学会? 来了,无代码的移动端操作教程,从PC移动端一体式开发,到移动端单…

python+nodejs+php+springboot+vue 导师双选系统

为了直观显示系统的功能,运用用例图这样的工具显示分析的结果。分析的导师功能如下。导师管理导师选择信息,管理项目,管理项目提交并对学员提交的项目进行指导。 为了直观显示系统的功能,运用用例图这样的工具显示分析的结果。分析…

Golang 函数 不定参数

不定参数 在C语言时代大家一般都用过printf()函数,从那个时候开始其实已经在感受不定参数的魅力和价值。如同C语言中的printf()函数,Go语言标准库中的fmt.Println()等函数的实现也严重依赖于语言的不定参数功能。 我们将介绍不定参数的用法。合适地使用…

✔★ 算法基础笔记(Acwing)(五)—— 动态规划【java版本】

动态规划 一、背包问题★f[i][j] 背包容量为j,前i个物品的最大价值 1. 01背包问题(不需要初始化) ✔1.6 ✔1.72. ☆ 完全背包问题(后面的 前面的某一项的最大值)一、朴素做法(三重循环)二、二维数组的优化&#xff08…

OpenCV 实现 SIFT→SURF 算法关键点检测实现

1,SIFT算法原理 1.1,基本流程 1.1.1 尺度空间极值检测 1.1.2 关键点定位 1.1.3 关键点方向确定 、 1.1.4 关键点描述 1.1.5 总结 1.2 SURF原理 2 代码实现 import cv2 as cv import matplotlib.pyplot as plt import numpy as np from pylab i…

open ai chartgpt 安装插件 txyz.ai

1 chatgpt 页面 左下角 用户 -> setting 2 3

RK3568驱动指南|第五期-中断-第44章 共享工作队列实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

2023年深圳等保测评机构名称以及地址汇总

你知道深圳等保测评机构有哪些?知道在哪里吗?今天我们小编就给大家汇总一下。 2023年深圳等保测评机构名称以及地址汇总 序号:1 名称:深圳市信息安全管理中心 地址:深圳市福田区莲花街道福中路城市数字资源中心 序…

CMake 官方完整版

CMake 官方完整版 一些概念TargetSignature 1. A Basic Starting Point(Step 1)Adding a Version Number and Configured Header FileSpecify the C StandardBuild and Test 2. Adding a Library(Step 2)-添加一个库Adding an Option 3. Adding Usage Requirements for Library…

【Verilog 教程】4.8Verilog 过程连续赋值

关键词:deassign,force,release 过程连续赋值是过程赋值的一种。这种赋值语句能够替换其他所有 wire 或 reg 的赋值,改写了 wire 或 reg 型变量的当前值。 与过程赋值不同的是,过程连续赋值的表达式能被连续的驱动到 …

pinyin-match选择器拼音快速检索目标

npm地址:https://www.npmjs.com/package/pinyin-match 选择器拼音快速检索目标(pinyin-match) 一. 使用方法二. 使用实例三. 实现效果 一. 使用方法 安装 pinyin-match 包 yarn add pinyin-match 或 npm install pinyin-match --save 引入 …

3分钟,免费制作一个炫酷实用的数据可视化大屏!

在当前大数据时代背景下,数据已成为在工业革命中如同煤炭、石油一般宝贵的资源。但是由于数据越来越庞大、越来越复杂,导致数据的可读性也越来越低。因此,对数据可视化的需求也越来越高,需要解决的问题也越来越复杂,而…

测试工程师高效编写API测试

1、自动化测试流程 我一直有编写自动化测试的习惯,但之前一直没有达到最理想的效果,也在反思问题出现的原因,最近终于有了一些思路。其主要的原因是之前写测试都是靠感觉,感觉哪些需要测试了,就写一个测试&#xff0c…

【面试必刷TOP101】二分查找-I 二维数组中的查找

目录 题目:二分查找-I_牛客题霸_牛客网 (nowcoder.com) 题目的接口: 解题思路: 代码: 过啦!!! 题目:二维数组中的查找_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1…

emacs怎么安装插件

2023年9月26日,周二下午 目录 Linux下Emacs的配置文件位置包管理器elpa怎么给elpa换源罗列可按照的插件怎么搜索插件怎么安装插件配置插件 Linux下Emacs的配置文件位置 默认配置文件位置是 ~/.emacs 或 ~/.emacs.d/init.el 如果没有inti.el的话,自己创…

产品经理如何进行项目管理?

在网上总是有人认为产品经理和项目经理不是一路人,工作上也没有什么共性,认为项目管理仅仅是项目经理的活,其实不然。一个项目从初始到结束这一整个周期,产品经理都是需要全程盯着的。 那么优秀的产品经理是怎么管理项目的呢&…