babel-plugin-import配置babel按需引入antd模块

已于 2022-04-22 08:59:15 修改
阅读量2k 收藏
点赞数 2
分类专栏： react 文章标签： vue
于 2020-06-03 09:57:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmartJunTao/article/details/106517888
版权
  • 安装yarn add babel-plugin-import
  • 运行  npm run eject 
  • 打开package.json文件　　
"babel": { 
　　　　"presets": [
　　　　　　"react-app" 
　　　　]
}
  • 添加配置：
"babel": {
    "presets": [
      "react-app"
    ],

    "plugins":
    [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }

 

  • style的属性为true的时候加载未编译为css的less，也就可以改变主题
  • 如果style：“css”就是加载编译好的css，无法更改主题
  • 确保src下没有.babelrc文件，重启项目

 

 

船长在船上
关注
专栏目录
vue2/3 - 解决报错Error: Cannot find module ‘babel-plugin-import‘（vue2/vue3报错无babel-plugin-import模块详细解决教程
高级前端工程师
03-04 3233
vue，vue2，vue3，Error: Cannot find module 'babel-plugin-import'，vue报错找不到babel-plugin-import模块，babel-plugin-import，vue运行项目时出现报错，vue打包编译build提示报错，解决vue报错，如何解决在vue网页中出现报错，安装axios依然不行，执行npm install antd babel-plugin-import依然报错怎么办，安装了依然提示报错咋办，The package manager
使用babel-plugin-import按需加载ant-design-vue组件
weixin_43846709的博客
03-14 1767
babel-plugin-import按需加载组件
使用babel-plugin-import使antd插件按需加载并自定义主题,在webpack.config.js文件下的相关配置
我的个人博客
12-09 1834
使用babel-plugin-import使antd插件按需加载并自定义主题,在webpack.config.js文件下的相关配置,这里演示的是webpack4.0 因为antd使用的是less,所以这里需要安装less 安装antd: yarn add antd 安装babel-plugin-import: yarn addbabel-plugin-import 按需加...
babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()
weixin_30951389的博客
07-04 745
用create-react-app做项目的时候，同时引入了antd，为了实现按需加载antd模块，用到他们提供的babel-plugin-import （ 一个用于按需加载组件代码和样式的 babel 插件） 虽然项目一开始是用create-react-app创建，但是之后有 yarn run eject，将所有内建的配置暴露出来，这样可以自由重新配置webpack，至于为什么要这...
ts-import-plugin 使用教程
最新发布
gitblog_00562的博客
08-20 348
ts-import-plugin 使用教程 ts-import-pluginbabel-import-plugin TypeScript Implement项目地址:https://gitcode.com/gh_mirrors/ts/ts-import-plugin 项目介绍 ts-import-plugin 是一个 TypeScript 编译器的插件，主要用于按需加载模块，减少打包体积。它通常...
react中使用AntDesign库 --- babel-plugin-import 配置
djdrb5393的博客
06-13 1153
{ "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }] ] } 转载于:https://www.cnblogs.com/kjtt/p/11014237.html
babel-plugin-import的配置项
盏茶作酒的博客
07-22 4079
babel-plugin-import 在 Babel 配置中引入该插件，可以针对 antd, antd-mobile, lodash, material-ui等库进行按需加载. 为什么需要 babel-plugin-import English Instruction 中文说明 如何在项目中添加 babel-plugin-import babelrc babel-loader 例子 { "libraryName": "antd" } import { Button } from '.
使用babel-plugin-import实现antd组件库中的组件按需加载
weixin_30387339的博客
07-14 539
Ant Design是蚂蚁金服基于react实现的一个UI 设计库，基于 npm + webpack + babel 的工作流，支持 ES2015。 而babel-plugin-import 可以从组件库中仅仅引入需要的模块，而不是把整个库都引入，从而提高性能。 如果使用import { Button } from 'antd';的写法会引入 antd 下所有的模块。 ...
babel-plugin-my-import:像babel-plugin-transform-imports这样的babel插件
05-09
实现组件库/工具库的按需加载，类似 babel-plugin-transform-imports 和 babel-plugin-import 我不会发布这个插件到 npm，实际生产请使用上述两个插件之一 使用 独立使用 const babel = require("@babel/core") ...
Vue 3.x Ant Design 使用 babel-plugin-import 来进行按需加载
weixin_43447840的博客
02-17 3386
最近学习用Ant Design Vue 开发项目，按照官方的快速上手进行了安装。 默认是全局引入，打包后体积很大，非常影响首屏加载速度，需要用到按需加载，仅引入要使用的组件。 不得不说官方文档写的很烂????，用的React举例，全是坑，在这完整分享下怎么做。 1. 安装 babel-plugin-import cnpm i babel-plugin-import --dev --save 某种未知原因，我用npm安装一直报错404，改用cnpm就好了。 2. 安装 less-loader cnpm in
项目实战三、antd的babel-plugin-import实现按需加载
chunchun1230的博客
02-14 2815
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件（原理） 1.通过yarn addbabel-plugin-import 安装babel-plugin-import插件 yarn addbabel-plugin-import 2.在webpack.config.js中添加如下代码进行配置antd的按需加载 ['import',{li...
vite-plugin-importer:集成babel-plugin-import
04-28
vite-plugin-importer 集成babel-plugin-import 用 配置与 npm install vite-plugin-importer --save yarn add vite-plugin-importer // vite.config.js import { defineConfig } from "vite" ; import usePluginImport from 'vite-plugin-importer' export default defineConfig ( { plugins : [ ... // other plugins usePluginImport ( { libraryName : "ant-design-vue" , libraryDirectory : "es" , s
使用 babel-plugin-import
qq_42532540的博客
12-17 1000
yarn add babel-plugin-import --dev 使用 vue-cli 2 修改.babelrc文件，配置 babel-plugin-import { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }
使用babel-plugin-import按需加载antd3组件，打包后文件还很大的问题。
monkey_shuo的博客
07-11 1465
最近项目中使用的UI组件库，由antd2升级到了antd3，webpack打包逻辑不变，并且用了babel-plugin-import使组件按需加载。 但是打包后发现，打包后的文件还是很大，压缩之后超过1M，最后查找原因发现： plugins: [ ["import", { "libraryName": "antd", ...
antd Webpack+babel配置
小小时光机的代码
02-27 566
1.ant-design-vue安装 npm i ant-design-vue moment 注意：同时安装多个包，中间用空格分开 2.ant-design-vue使用 在main.js中全局的进行注册使用 import {Button} from "ant-design-vue"; Vue.use(Button); // vue文件使用模板 <a-button> 按钮</...
babel-plugin-import只能实现1个组件库的按需引入
qq_38886284的博客
04-28 489
在开发和使用组件库时我们知道可以通过安装依赖，并配置相应的.babelrc文件实现组件库中组件的按需引入。按照如上方式配置，便可实现组件的按需引入。但是在我的项目中同时用到两个组件库时，就只有一个配置生效了。查找很对资料后发现babel-plugin-import只能实现1个组件库的按需引入。
babel-plugin-import 实现按需引入
weixin_43487782的博客
07-07 1991
为什么需要这个插件 在 antd 和 element 两个组件库中，index.js 分别是这样的： // antd export { default as Button } from './button'; export { default as Table } from './table'; // element import Button from '../packages/button/index.js'; import Table from '../packages/table/index.js
配置react支持less，babel-plugin-import按需加载antd
奔跑的面条博客
06-20 922
原文：https://blog.csdn.net/lvanboy/article/details/88200433 安装基础插件：react-router，axios，less-loader ,AntD（UI框架，基于react封装），暴露webpack配置，修改less-loader。 Create-react-app脚手架创建的项目默认是不支持less语法，但AntD UI 框架是基于Less编写的，为了定制主题，修改less源码文件，让这个框架能够正常使用，需要暴露webpack，修改webpa.
babel-plugin-import
09-06
babel-plugin-import 是一个 Babel 插件，用于优化 JavaScript 代码中的模块导入语句。它的作用是按需加载模块，减小打包后的文件体积，提升页面加载速度。 当使用 ES6 模块语法（import/export）导入模块时，通常会将整个模块都导入进来，即使只使用了其中的部分内容。而 babel-plugin-import 可以将这种按需加载的机制应用到代码中，只导入需要的部分。 具体来说，babel-plugin-import 可以将形如 `import { Button } from 'antd'` 的导入语句转换为 `import Button from 'antd/lib/button'`，只导入 Button 组件所在的文件，而不是整个 antd 库。这样可以减小打包后的文件体积，并且不会加载无用的代码。 使用 babel-plugin-import 需要在 Babel 配置文件中进行配置，示例配置如下： ```json { "plugins": [ ["import", { "libraryName": "antd", "style": "css" }] ] } ``` 上述配置表示使用 babel-plugin-import 对 antd 库进行按需加载，同时加载 CSS 样式。通过指定 `libraryName` 和 `style` 来配置需要按需加载的库和样式。 总而言之，babel-plugin-import 可以提升代码的性能和加载速度，特别适用于大型项目和 UI 库的开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值