webpack 里的 import, exports 实现原理
在使用 webpack 对脚本进行打包, 在开发中, 每个文件中都会使用 import 语句来导入一些功能,又会使用 export 语句导出一些功能,为了研究 import 和 export 原理,研究了 webpack 打包后的代码,其实原理也是非常简单:
webpack 对所有输入文件都打包到一个文件中:
在最终的输出文件中,webpack 会定义一个 Object 对象,这个对象中放入了所有的输入文件的内容, 以文件名为 key, 文件内容(字符串)作为值,如:
var modules= {};
modules['index'] = "源代码";
modules['hello'] = '源代码';
当然,webpack 会对源代码进行一定的修改, 会把 export 语句修改为 exports.变量 = 值, 这种方法, exports 是一个参数, 大概是这样子的:
modules['index'] = (function(exports) {
// 代码,放在一个私有域中。
// 通过 exports 对象,把需要公开的变量,函数,类公开出去。
exports.xx = xxx;
});
这就大概是一个源文件最终的结果,变成了一个函数,那么这个 exports 到底是个什么对象?其实 exports 就是一个 Object 对象,里面没有任何其实内容,全部是函数中设置的内容,作用只是把对象传递到 import 语句:
先来看看 import 的语法: import xxx from 'filename'
import 语句, 最终大概会变成这样:
var cmp1 = require('filename');
require 函数大概的实现:
function require(id) {
if(installedModules[id]) {
return installedModules[id].exports; // 返回 exports 对象
}
webpack 里的 import, exports 实现原理的更多相关文章
- 单步调试理解webpack里通过require加载nodejs原生模块实现原理
在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...
- 关于common.js里面的module.exports与es6的export default的思考总结
背景 公司项目需要裁切功能,基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库,仅限于公司内部使用) 在vue-cropp ...
- webpack里的module选项配置
webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...
- nodejs里的module.exports和exports的关系
关于node里面的module.exports和exports的异同,网上已经有很多的资料,很多的文章,很多的博客,看了很多,好像懂了,又好像不懂,过几天又不懂了...大致总结是这样的: //下面这种 ...
- 在webpack里使用jquery.mCustomScrollbar插件
malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站:http://manos.malihu.gr/jquery-custom-conte ...
- 06 hash join (Oracle里的哈希连接原理)
hash join (Oracle里的哈希连接原理) 2015年09月25日 17:00:28 阅读数:2188 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集 ...
- IntelliJ Idea 依赖包下载成功,代码里无法import问题解决方法
今天clone一个github上的基于maven的项目IntelliJ Idea 依赖包下载成功,代码里无法import.解决方法:删掉原来的.iml,刷新. 如果不行,可尝试:File->In ...
- webpack里CommonJS的require与ES6 的module.exports加载模块有何不同
只需明白commonjs的规则即可,import会被转化为commonjs格式的,babel默认会把ES6的模块转化为commonjs规范的. import vue from 'vue'; //等价于 ...
- webpack里的externals
最近在用webpack做一些是sdk相关的东西,有几个概念总结一下: 1.library要做sdk,一定要做的一个配置,用于说明最终的SDK暴露给调用者的一个名称例如:library: 'HelloJ ...
随机推荐
- 解决samba共享虚拟机第二块磁盘的难题
linux下使用samba共享文件到window下已经实现过了 点此链接 但是共享时磁盘空间是有限的,如果空间使用完了该怎么处理呢?这是个头疼的问题,不知道samba支持不支持共享第二个文件夹,由 ...
- Java多线程编程核心技术-第1章-Java多线程技能-读书笔记
第 1 章 Java 多线程技能 本章主要内容 线程的启动 如何使线程暂停 如何使线程停止 线程的优先级 线程安全相关的问题 1.1 进程和多线程的概念及线程的优点 进程是操作系统结构的基础:是一次程 ...
- nginx 设置反向代理
一.多个路径指向同一ip的不同服务 参考地址:https://www.cnblogs.com/hanmk/p/9289069.html 编辑nginx.conf配置文件,新增加一个server模块,或 ...
- python scapy中sniffer的用法以及过滤器
Sniff方法定义: sniff(filter="",iface="any", prn=function, count=N) 1.filter的规则使用 Ber ...
- vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)
问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...
- 关于m3u8格式的视频文件ts转mp4下载和key加密问题
一,利用网站浏览器F12键,利用谷歌浏览器插件找到视频的.m3u8文件,并打开. 二,打开m3u8文件后,里面有很多.ts的链接,和key的链接. 三,保存为html文件,下载ts文件,代码如下:可加 ...
- C# 动态加载(转)
原文链接地址:http://blog.csdn.net/lanruoshui/article/details/5090710 原理如下: 1.利用反射进行动态加载和调用. Assembly assem ...
- 2018-2019-20175205实验四《Android程序设计》实验报告
目录 2018-2019-20175205实验四<Android程序设计>实验报告 实验要求 教材学习 第二十五章 活动 第二十六章 UI组件 第二十七章 布局 实验步骤 任务一 任务二 ...
- 【Gamma阶段】第九次Scrum Meeting
冰多多团队-Gamma阶段第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 美化前端及编辑器界面,编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 添加scp工具,添加 ...
- 【操作系统之五】Linux常用命令之grep
一.概念grep(Global search Regular Expression and Print out the line)强大的文本搜索工具,从文本文件或管道数据流中筛选匹配的行及数据,并把匹 ...