从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 中写入以 ...
随机推荐
- 入门大数据---安装ClouderaManager,CDH和Impala,Hue,oozie等服务
1.要求和支持的版本 (PS:我使用的环境,都用加粗标识了.) 1.1 支持的操作系统版本 操作系统 版本 RHEL/CentOS/OL with RHCK kernel 7.6, 7.5, 7.4, ...
- ShellExecute指定IE浏览器打开网页
ShellExecute(NULL,L"open", L"iexplore.exe", L"www.baidu.com", NULL, SW ...
- RS232/485通信方式 保存和加载时数据的处理
RS232/485通信方式 数据以RS232/485方式通信时,以0xA5作为开始码,以0xAE作为结束码.在开始码和结束码之间的0xA5, 0xAA, 0xAE数据需要进行转码. PC端发送数据时将 ...
- 【总结】Asp.Net Mvc 后台控制器获取页面发来的参数类型
接收各种参数(普通参数,对象,JSON, URL) 待续...
- Java设计模式三
建造者模式 当我们思考通过复杂的零件来生成一个完整的产品时,就用到了今天要说的主题-建造者模式,下面我们实际的代码来分析建造者模式的设计 假设飞机起飞需要有多个步骤,但是每种型号的飞机起飞的步骤又不相 ...
- bash默认组合按键
组合按键 运行结果 Ctrl + C 终止目前的命令 Ctrl + D 输入结束 (EOF),例如邮件结束的时候: Ctrl + M 就是 Enter 啦! Ctrl + S 暂停屏幕的输出 Ctrl ...
- 求助:Runtime exception at 0x004000bc: invalid integer input (syscall 5)
代码 .data S17: .asciiz "the bigger one is:" .text move $fp $sp j main max: lw $t8 ($sp) sub ...
- html鼠标自定义右键菜单:css+js实现自定义html右键菜单
我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...
- 小程序爬坑(一)之时间格式IOS的兼容
new Date()传参差异化问题 在安卓系统中,直接传入标准格式字符串,就可以转换为Date格式数据 在苹果系统中不支持ISO-8601标准格式的时间字符串 IOS在使用new Date()创建日期 ...
- MySQL CodeFirst的配置与注意事项
mysql+ef的配置相比较mssql+ef来说复杂一些.我的感受就是配置难度在于插件版本造成的各种不兼容问题.另外参考了很多博客,将多个博客里的经验综合才得以实现,因为不是每个人的操作都和那些博客作 ...