从element-ui按需引入去探索
element-ui的按需引入的配置:文档地址
npm install babel-plugin-component -D
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
三步下来就能方便的使用按需引入的功能了。
其中的原理是什么?babel-plugin-component在其中做了什么?
探究处理过程
首先新建一个demo,使用最简化的配置,demo地址。
demo中只用了四种钩子:
Program:第一个访问的节点,初始化数据。
ImportDeclaration:处理import import { Button, Select } from 'element-ui';
CallExpression:函数执行会访问到,处理Vue.component(Button.name, Button);
MemberExpression:处理对象访问,Select.name
。
总结一下处理的过程:
第一步
在Program初始化specified等数据,在处理当前文件的过程中这些数据作为全局使用。
第二步
在 ImportDeclaration 里将收集import的变量,比如Button,Select等
import { Button, Select } from 'element-ui'
将变量存储到specified中,这个specified会作为后面处理AST的判断条件
specified[spec.local.name] = spec.imported.name
第三步
在CallExpression中,根据是否使用到Button等会在AST添加节点,这些节点会转换为下面的代码:
import button form "element-ui/lib/button"
添加节点这个环节使用到@babel/helper-module-imports
中的helper方法addSideEffect,addDefault,简化了手动操作。
简单介绍一下helper-module-imports:文档链接
调用addSideEffect方法能够生成类似 import "source"
的代码,适合添加css等资源。
调用addDefault方法能够生成类似import _default from "source"
的代码,适合添加js。
上面三步之后,想要的AST就构建完成了。以demo为例,源代码:
import { Button } from 'element-ui';
Vue.component(Button.name,Button)
执行npm run build ,babel处理之后的代码是:
var _button = _interopRequireDefault(require("element-ui/lib/theme-chalk/button.css"));
require("element-ui/lib/theme-chalk/base.css");
var _button2 = _interopRequireDefault(require("element-ui/lib/button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
Vue.component(_button2["default"].name, _Button);
可以看到自动引入了css require("element-ui/lib/theme-chalk/base.css")
,引入element-ui不见了,增加了require("element-ui/lib/button")
需要解释一下,上面的import变成了require是因为babel中presets-env的影响;同理_interopRequireDefault也是。
如果在babel.config.json设置modules:false
结果将是下面的样子:
import _Button2 from "element-ui/lib/theme-chalk/button.css";
import "element-ui/lib/theme-chalk/base.css";
import _Button from "element-ui/lib/button";
Vue.component(_Button.name, _Button);
// 看起来顺眼多了
版本问题
在自己检查代码时发现第一个demo的结果Vue.component(_button2["default"].name, _Button);
中的_Button是一个错误,代码中没有这个引用,执行起来肯定是要报错的;仔细查看了plugin.js并没有发现问题。当换成直接引入babel-plugin-component的时候就没有了问题,通过对比终于发现@babel/helper-module-imports的版本不同,
- babel-plugin-component 内部node_modules中依赖的 @babel/helper-module-imports 版本7.0.0
- 跟随helper-module-transforms一起安装的是7.10.4
切换到版本7.0.0就可以了。
解决方案 一
版本问题能够通过修改plugin.js来解决么?看下面的代码:
function importMethod(methodName, file, opts) {
if (!selectedMethods[methodName]) {
....
selectedMethods[methodName] = addDefault(file.path, path, { nameHint: methodName });
....
}
// ....
return selectedMethods[methodName];
}
在对Vue.component(Button.name, Button)
的访问中需要对参数Button做两次处理,都需要执行到importMethod方法,methodName的值就是"Button"
,按照执行逻辑两次执行返回的是同一的对象:
{
type:"Identifier",
name:"_Button"
}
生成代码的时候应该是 Vue.component(_button2["default"].name, _button2["default"])
,这里却好像把第二个_Button给忘了,猜测难道此处的引用传值导致的么?
考虑到通过一个简单的对象能生成_button2["default"]
,说明自己也可以创建一个对象生成对应的代码,于是就简单的deepClone一下selectedMethods[methodName],试过之后果然可以,此处并没有查找到真正的原因,只作为探索,代码如下:
function importMethod(methodName, file, opts) {
if (!selectedMethods[methodName]) {
....
selectedMethods[methodName] = addDefault(file.path, path, { nameHint: methodName });
....
}
// ....
// 此处的t是types,带有一个cloneDeep的方法
return t.cloneDeep(selectedMethods[methodName]);
}
解决方案二:
其实在打断点的时候发现,最终生成生成的AST是正确的,错在代码生成的阶段,经过尝试发现直接把modules:false
就可以避免问题。一般来说我们都要把babel的模块处理取消掉,由webpack来处理模块打包,所以这个方案更加合适。
结束
查看有哪些钩子 :地址
babel中插件的执行顺序:插件执行顺序:
本文只介绍了四个钩子,原插件还使用了IfStatement,ConditionalExpression,LogicalExpression,VariableDeclarator,Property,ArrayExpression,AssignmentExpression七个钩子,这几个钩子主要是处理特殊的情况,暂时还未遇到。
最后如有错误之处,望指正
从element-ui按需引入去探索的更多相关文章
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- 针对elementUI 中InfiniteScroll按需引入的一点注意事项
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- UI组件--element-ui--全部引入和按需引入
主要就是一句话, 如果用到的组件少, 要按需引入, 如果用到的组件很多,就全部引入, 因为按需引入全部的, 和全部引入效果一样(我这是废话, 大家都知道...) 完整引入 在 main.js 中写入以 ...
随机推荐
- 入门大数据---Kafka深入理解分区副本机制
一.Kafka集群 Kafka 使用 Zookeeper 来维护集群成员 (brokers) 的信息.每个 broker 都有一个唯一标识 broker.id,用于标识自己在集群中的身份,可以在配置文 ...
- 【转】HBase的MapReduce调用
参考: https://blog.csdn.net/u012848709/article/details/83744699 自己照着搭建了下,顺便把坑也踩了下,项目见云盘: 链接:https://pa ...
- Java 从入门到进阶之路(二十五)
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的子接口 List的 增删改查和与数组间相互转换的方法,本章我们来看一下 Java 集合框架中的Collection 的 ...
- js事件入门(4)
4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作. 4.1.onsubmit事件 当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返 ...
- 《Java核心技术(卷1)》笔记:第8章 泛型程序设计
(P 327)"菱形"语法: ArrayList<String> files = new ArrayList<>(); // Java 9 扩展了菱形语法的 ...
- typeof、instanceof与constructor
typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 语法: typeof( ...
- 记一次服务器被植入挖矿木马cpu飙升200%解决过程
线上服务器用的是某讯云的,欢快的完美运行着Tomcat,MySQL,MongoDB,ActiveMQ等程序.突然一则噩耗从前线传来:网站不能访问了. 此项目是我负责,我以150+的手速立即打开了服务器 ...
- JavaScript图形实例:迭代函数系统生成图形
迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...
- Linux 字符处理之【grep】
参数: -i: 不区分大小写 -c: 统计包含匹配的行数 -n: 输出行号 -v: 反向匹配 示例文件: (example.txt) The cat's name is Tom, what's the ...
- Deno 学习笔记(1)安装及简单的request
Deno下载和安装 PowerShell iwr https://deno.land/x/install/install.ps1 -useb | iex Shell curl -fsSL https: ...