在使用 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 对象

}

var module = installedModules[id] = {
      i: moduleId,
      l: false,
      exports: {} // 定义 exports 对象
 };
 
modules[id](module.exports); // 把 exports 参数传递到函数中
return module.exports; // 最后返回
}
 
不管 import xxx 语句中的 xxx 怎么设置, 最终都会变成一个变量,引用模块的 exports 对象,然后通过这个变量来访问变量,函数等:
import { a, b } from 'filename'
 
console.log(a);
console.log(b);
 
最终编译的结果:
var cmp1 = require('filename');
console.log(cmp1.a);
console.log(cmp1.b);
 
最后, 文件传统执行入口文件的代码 require('index');

webpack 里的 import, exports 实现原理的更多相关文章

  1. 单步调试理解webpack里通过require加载nodejs原生模块实现原理

    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...

  2. 关于common.js里面的module.exports与es6的export default的思考总结

    背景 公司项目需要裁切功能,基于第三方图片裁切组件vue-cropper(0.4.0版本),封装了图片裁切组件(picture-cut)(放在公司内部组件库,仅限于公司内部使用) 在vue-cropp ...

  3. webpack里的module选项配置

    webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...

  4. nodejs里的module.exports和exports的关系

    关于node里面的module.exports和exports的异同,网上已经有很多的资料,很多的文章,很多的博客,看了很多,好像懂了,又好像不懂,过几天又不懂了...大致总结是这样的: //下面这种 ...

  5. 在webpack里使用jquery.mCustomScrollbar插件

    malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站:http://manos.malihu.gr/jquery-custom-conte ...

  6. 06 hash join (Oracle里的哈希连接原理)

    hash join (Oracle里的哈希连接原理) 2015年09月25日 17:00:28 阅读数:2188 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集 ...

  7. IntelliJ Idea 依赖包下载成功,代码里无法import问题解决方法

    今天clone一个github上的基于maven的项目IntelliJ Idea 依赖包下载成功,代码里无法import.解决方法:删掉原来的.iml,刷新. 如果不行,可尝试:File->In ...

  8. webpack里CommonJS的require与ES6 的module.exports加载模块有何不同

    只需明白commonjs的规则即可,import会被转化为commonjs格式的,babel默认会把ES6的模块转化为commonjs规范的. import vue from 'vue'; //等价于 ...

  9. webpack里的externals

    最近在用webpack做一些是sdk相关的东西,有几个概念总结一下: 1.library要做sdk,一定要做的一个配置,用于说明最终的SDK暴露给调用者的一个名称例如:library: 'HelloJ ...

随机推荐

  1. SpringBoot——配置文件详解【五】

    前言 SpringBoot的配置文件 配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的. application.properties application.yml 配置文件 ...

  2. USACO Protecting the Flowers

    洛谷 P2878 [USACO07JAN]保护花朵Protecting the Flowers 洛谷传送门 JDOJ 1009: 护花 JDOJ传送门 Description FJ出去砍木材去了,把N ...

  3. 阿里巴巴java开发手册 学习

    3. [强制]类名使用 UpperCamelCase 风格,必须遵从驼峰形式,但以下情形例外: DO / BO / DTO / VO / AO 正例: MarcoPolo / UserDO / Xml ...

  4. 几款不错的java表达式引擎

    mvel 比较老牌了,很强大,但是好久没更新了 参考地址: http://mvel.documentnode.com/ https://github.com/mvel/mvel ScriptEngin ...

  5. 请描述一下cookies、sessionStorage、localStorage、session四者的区别?

    存储大小: cookie在4K以内. sessionStorage和localStorage在5M以内. 有效时间: cookie:如果未设置过期时间,关闭浏览器时清空:如果设置了有效时间则在到期后清 ...

  6. Web中线程与IIS线程池自动回收机制

    开发Web项目后,部署到 IIS上 ,运行一直稳定,当Web程序中加入了定时任务,或者线程之类的机制后,第二天发现悲催了,定时任务并没有执行,此时重新登录一下网站,定时任务又重新执行.原来IIS默认有 ...

  7. Beta/Gamma事后分析

    目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结 对照敏捷开发的原则, 你觉得你们小组做得最好的是哪几个原则? 请列出具体的事例. 照片 设想和目标 我们的 ...

  8. [Gamma]Scrum Meeting#5

    github 本次会议项目由PM召开,时间为5月30日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  9. [技术博客]阿里云签名机制字符串的C语言实现

    [技术博客]阿里云签名机制字符串的C语言实现 问题描述见:阿里云签名机制 话不多说,上字符串函数转化函数代码 bool AlicloudRequest::sendV2Request() { if( q ...

  10. leetcode 111. 二叉树的最小深度

    题目描述: 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null, ...