babel-plugin-import 实现自动按需引入

最新推荐文章于 2024-07-04 11:40:37 发布
最新推荐文章于 2024-07-04 11:40:37 发布
阅读量1w 收藏 5
点赞数 2
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swx999/article/details/113174216
版权
文章介绍了如何通过 babel-plugin-import 这款 Babel 插件，来实现 Vue 项目的组件按需引入，以减小代码包体积。详细步骤包括下载插件并配置 .babelrc 或 babel.config.js，以及展示在代码中如何直接引入 Vant 组件。
摘要由CSDN通过智能技术生成

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1、下载

npm i babel-plugin-import -D

2、
（1）在.babelrc 中添加配置

     注意：webpack 1 无需设置 libraryDirectory

{
   
  "plugins": [
    ["import", {
   
      "
最低0.47元/天 解锁文章
swx980
关注
专栏目录
使用babel-plugin-import按需加载ant-design-vue组件
weixin_43846709的博客
03-14 1745
babel-plugin-import按需加载组件
babel-plugin-import 插件 的使用
热门推荐
ShiYadong的专栏
06-30 4万+
     babel-plugin-import   是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式以Vant 为例：# 安装 babel-plugin-import 插件 npm i babel-plugin-import -D// 在 .babelrc 或 babel-loader 中添加插件配置 // 注意：webpack 1 无需设置 libra...
babel-plugin-import, 模块式导入插件插件.zip
09-18
babel-plugin-import, 模块式导入插件插件 babel-plugin-import模块导入插件，与 antd， antd移动插件，等等。 为什么 babel-plugin-import英语教学指南中文说明在哪里添加 babel-plugin-importb
[问题记录][babel-plugin-component] If you are using bothon-demand and importing all
最新发布
weixin_38699155的博客
07-04 353
[babel-plugin-component] If you are using bothon-demand and importing all
vue+vant2 babel-plugin-import插件按需引入组件 + postcss-px-to-viewport屏幕适配，详细步骤（第一步）
u010534828的专栏
02-24 2186
vue+vant2 babel-plugin-import插件按需引入组件 + postcss-px-to-viewport屏幕适配，详细步骤
vant引用babel-plugin-import实现自动按需引入组件
seventy_seven77的博客
04-13 3044
按照官网使用会报错 vuecli3 安装插件 npm i babel-plugin-import -D babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true ...
Cannot find module 'babel-plugin-import'报错的解决方法
qq_43412333的博客
01-18 3万+
出现如下情况 说明axios所需的插件没有装上 安装 npm install axios qs --save npm install antd babel-plugin-import --save 最后 问题成功解决
babel-plugin-import的配置项
盏茶作酒的博客
07-22 4040
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 '.
Vue 3.x Ant Design 使用 babel-plugin-import 来进行按需加载
weixin_43447840的博客
02-17 3364
最近学习用Ant Design Vue 开发项目，按照官方的快速上手进行了安装。 默认是全局引入，打包后体积很大，非常影响首屏加载速度，需要用到按需加载，仅引入要使用的组件。 不得不说官方文档写的很烂????，用的React举例，全是坑，在这完整分享下怎么做。 1. 安装 babel-plugin-import cnpm i babel-plugin-import --dev --save 某种未知原因，我用npm安装一直报错404，改用cnpm就好了。 2. 安装 less-loader cnpm in
element-plus 按需引入的两种方式( 官方推荐方式 及babel-plugin-import)
web15870359587的博客
03-03 1713
1.官方推荐方式 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 npm install -D unplugin-vue-components unplugin-auto-import Webpack安装 方式一：写入 webpack.config.js const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplu
babel-plugin-import 实现按需引入
CamilleZJ的博客
11-15 9042
babel-plugin-import 实现按需引入
babel-plugin-import 插件的使用
weixin_43222587的博客
04-13 1205
babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式. 安装 npm i babel-plugin-import -D 在babel.config.js中配置 "plugins": [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "
npm i babel-plugin-import -D之后报错
weixin_48341937的博客
07-21 718
替换modules/.bin/XX文件。
babel-plugin-import 插件
MooreLxr的博客
02-22 544
babel-plugin-import是一款babel插件,在编译过程中将import的写法自动转换成按需引入的方式. 安装 npm i babel-plugin-import -D 以vant组件为例，按照以下来配置 // 在 .babelrc 或 babel-loader 中添加插件配置 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "
npm之babel-plugin-import，按需引入
子非渔
10-09 3208
通过后
babel-plugin-import
weixin_45954775的博客
06-30 2300
“babel-plugin-import”，可以将 import { } from 的形式导入的文件，按需加载并且自动引入其样式。 安装 npm install babel-plugin-import -dev 配置 ：在配置文件进行配置（package.json） "babel": { "presets": [ "react-app" ], //-----------这段------- "plugins": [ [ "impor
组建按需加载之babel-plugin-import
chaitong2204的博客
07-31 1万+
笔者最近发现，很多开发的小伙伴引用第三方的库都喜欢全局引入，其实这样是非常不友好的 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ...
使用 babel-plugin-import
qq_42532540的博客
12-17 985
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安装
08-29
要安装babel-plugin-import，可以按照以下步骤进行操作： 1. 在项目目录下打开终端或命令提示符窗口。 2. 运行以下命令来安装babel-plugin-import： ``` npm install --save-dev babel-plugin-import ``` 或者如果你使用的是 Yarn 包管理器，可以运行以下命令： ``` yarn add --dev babel-plugin-import ``` 3. 安装完成后，你可以在项目的 .babelrc 文件中配置该插件。如果没有该文件，可以在项目根目录创建一个新的 .babelrc 文件，并添加以下内容： ```json { "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] } ``` 这里以引入 Ant Design 组件库为例，你可以根据实际情况修改 libraryName、libraryDirectory 和 style 的值。 4. 保存 .babelrc 文件后，重新运行你的构建工具（如 webpack、rollup 等），它会自动应用 babel-plugin-import 插件来按需引入组件。 这样，你就成功安装并配置了 babel-plugin-import 插件。记得根据你的项目需求修改 .babelrc 中的配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值