ES6 import代码智能转换Babel插件: babel-plugin-imports-transform
babel-plugin-imports-transform
ES6 import代码智能转换Babel插件,优化(webpack等)打包构建体积。
Github地址: https://github.com/abell12345...
分为两种情形使用:index.js文件作为Babel插件来使用,而index-transform.js可以在js代码中单独调用函数来使用。
会将下面的import代码:
import { Row, Grid as MyGrid } from 'react-bootstrap';import { merge } from 'lodash';
转化为引入单个对应文件:
import Row from 'react-bootstrap/lib/Row';import MyGrid from 'react-bootstrap/lib/Grid';import merge from 'lodash/merge';
为什么要这么做?
当Babel遇到下面的模块引入代码的时候:
import { Grid, Row, Col } from 'react-bootstrap';
它会简单的把上面的代码编译为下面的代码:
var reactBootstrap = require('react-bootstrap');var Grid = reactBootstrap.Grid;var Row = reactBootstrap.Row;var Col = reactBootstrap.Col;
一些库, 比如 react-bootstrap
和 lodash
, 其体积是相当大的,如果只是使用其中的部分API的话,上面的代码也会把整个库打包进去,从而导致打出的包的体积会特别大。唯一的处理方式是只引入对应的子模块:
import Grid from 'react-bootstrap/lib/Grid';import Row from 'react-bootstrap/lib/Row';import Col from 'react-bootstrap/lib/Col';
但是,我们引用的部分越多,上面的代码写的就会越多。 而这个插件可以让你用简单的语法来引入对应的模块,只打包对应的文件,而不是将整个库打包进去。
另外,这个插件可以配置:如果某个同学书写了会打包进整个库
的代码的话就会抛出异常,比如:
import Bootstrap, { Grid } from 'react-bootstrap';// -- or --import * as Bootstrap from 'react-bootstrap';
安装
npm install --save-dev babel-plugin-imports-transform
使用
In .babelrc:
{"plugins": [["babel-plugin-imports-transform", {"next": {"transform": "next/lib/${member-lowercase}","preventFullImport": true,"style": "next/lib/${member-lowercase}/index.scss",},"lodash": {"transform": "lodash/${member}","preventFullImport": true}}]]}
style支持
如上面的示例,我们支持如果配置了style属性我们会自动帮引入style文件,而且会做只能匹配,只有该样式文件存在的情形下才会做对应的引入,否则不引入。
高级转换
默认提供的字符串替换的转换形式并不能满足所有的需求,比如,需要对import的名字进行正则匹配的情形下,你可以提供行一个js文件路径,该文件exports出一个执行函数来替代字符串的转换。记住,.js文件的路径需要是根据这个插件的相对路径,一般这个插件的路径都是:/node_modules/babel-plugin-imports-transform
。你可以提供任意的文件名字,只要以.js结尾。
示例如下:
.babelrc:
{"plugins": [["babel-plugin-imports-transform", {"my-library": {"transform": "../../path/to/transform.js","preventFullImport": true}}]]}
/path/to/transform.js:
module.exports = function(importName) {return 'my-library/etc/' + importName.toUpperCase();
};
这有点hack,但是是因为.babelrc配置文件是一个纯JSON,值只能配置字符串而不能配置函数。 在Babel 7.0, 貌似.babelrc.js配置文件会被提供, 到时候这个插件会被升级来支持配置函数。
相关问题参考: https://github.com/babel/babe...
ES6 import代码智能转换Babel插件: babel-plugin-imports-transform相关推荐
- [转] 以 async/await 为例,说明 babel 插件怎么搭
你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...
- babel 插件为react元素自动添加属性
原文链接: babel 插件为react元素自动添加属性 上一篇: clip-path 绘制css常见图形 制作有趣的动画 下一篇: js 生成器 协程 参考 https://www.imliyan. ...
- Babel 插件通关秘籍
作者介绍 某一线大厂某架构组前端工程师,公众号[神光的编程秘籍],维护公司的 builder 和 ide,对编译原理.前端工程化有一定的研究. 小册介绍 实战案例源码 babel 已经是前端领域的必备 ...
- JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用
本文摘自阮一峰老师的<ECMAScript 6入门>,原文地址:http://es6.ruanyifeng.com/#docs/intro ECMAScript 6 是一个泛指,含义是5. ...
- JavaScript高级语法打包 - babel插件安装配置报错!Error: Cannot find module ‘@babel/preset-preset.env‘
目录 1. 插件安装和配置 2. 运行打包 - 报错信息 3. 解决办法 1. 插件安装和配置 安装babel转换器相关的包: npm i babel-loader @babel/core @babe ...
- es6 import 命令
import 命令 使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块. // main.js import {firstName, lastName ...
- Babel 之 @babel/preset-env
Babel 已经成为前端工程化开发的必备工具链.自 Babel 7.0 以后,Babel 进一步对工具优化和插件统一管理,全面迁移到 @babel 中.@babel/preset-env 是十分常用的 ...
- Atom JS 代码智能提示补全
JS 代码智能提示补全 题外话 官方正式版虽然内置了.autocomplete-plus:最为明显的一个功能就是记忆你已经输入过的名称进行匹配: 但是针对于某些语言来说,还是有些不足的-.其中 JS ...
- 微软亚研院副院长周明:从语言智能到代码智能
11月6日上午,在中国中文信息学会和中国计算机学会联合创办的"语言与智能高峰论坛"上,微软亚洲研究院副院长周明,以<从语言智能到代码智能>为题,介绍了智能代码理解和生成 ...
最新文章
- SKU表管理之保存SKU表数据
- studio-引入外来包
- [攻防世界 pwn]——level3
- [css] box-sizing常用的属性有哪些?分别有什么作用?
- 鸿蒙关键技术研究,华为鸿蒙 2.0 系统主题演讲公布,详细架构 9 月 11 日揭晓
- 我想说:mysql 的 join 真的很弱|文末福利
- 深度优先搜索——选数(洛谷 P1036)
- xml能存图片吗_如何Get大量的图片搜索流量?(分享几大Image SEO技巧!)
- 小程序接入h5页面_原生小程序接入H5页面,请求后台接口,获取数据
- python处理子进程_Python线程处理多个bash子进程?
- 热烈祝贺电脑升级到64G内存了
- VS2008编译TrueCrypt
- 使用Spring-data-jpa修改数据后,查询到脏数据
- 计算机导论知识体系,《计算机导论》课程知识体系结构研究
- 中国科学数学模板如何在CTEX和texstudio中顺利运行
- GDB 用法之查看内存
- Transformer 和卷积神经网络在跨物种基因组DNA N6甲基腺嘌呤位点识别中的应用
- Redis之sql缓存
- C# Minitab Sigma 无偏常量
- 干货 | 80篇+网络安全面试经验帖
热门文章
- android系统sharedUserId: SYSTEM_UID+PHONE_UID+BLUETOOH_UID+LOG_UID+NFC_UID
- 【Android】init.rc
- Java方法 signature
- MapReduce框架中map、reduce方法的运行机制
- RabbitMQ—AMQP协议重要概念介绍
- Web服务器超时处理
- 【Luogu】P1896互不侵犯King(状压DP)
- 解决 FTPClient 出现的553错误
- P3796 【模板】AC自动机(加强版)
- Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)