rollup打包JavaScript class模块的处理分析

简介: rollup打包JavaScript class模块的处理分析

模块源文件

简单写一个模块源文件,用于后续的分析。

class PmsLib {
  constructor(option) {
    ///
  }
  getBaseData() {
    return this.baseData;
  }
  static _jQueryInterface() {
    return new PmsLib(option);
  }
}

class转换

要说JavaScript里面没有类的概念那是真的。class也只不过是语法糖。

var PmsLib = /*#__PURE__*/function () {
    /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
    /// 还特地加上了/*#__PURE__*/
}

constructor转换

这个就是constructor转化成了对应的函数。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  
  /// constructor
  function PmsLib(option) {
    /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
    /// 后面在需要的时候由new操作符构造并返回
  }
}

非static函数转换

prototype是一个关键,也是JavaScript里无处不在的原型。rollup会生成一个_proto作为PmsLib的prototype,所有“非static”的函数都会被装进这个原型里。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  
  /// constructor
  function PmsLib(option) {
    /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
    /// 后面在需要的时候由new操作符构造并返回
  }
  
  /// 非static的函数处理开始
  /// rollup帮我们自动加上这个原型
  var _proto = PmsLib.prototype;
  /// getBaseDate被装到这个原型里
  _proto.getBaseData = function getBaseData() {
      return this.baseData;
  };
}

static函数转换

非常清晰有没有?之前类里面的声明成static的同名函数,由rollup直接构造出来。

var PmsLib = /*#__PURE__*/function () {
  /// 从rollup转换后的代码上看,class的声明转化成了一个匿名函数
  /// 还特地加上了/*#__PURE__*/
  /// constructor
  function PmsLib(option) {
     /// 其实构造函数就是构造了一个匿名函数闭包范围内的同名函数
     /// 后面在需要的时候由new操作符构造并返回
  }
  
  /// 非static的函数处理开始
  /// rollup帮我们自动加上这个原型
  var _proto = PmsLib.prototype;
  /// getBaseDate被装到这个原型里
  _proto.getBaseData = function getBaseData() {
      return this.baseData;
  };
  
  /// static的函数处理开始
  PmsLib._jQueryInterface = function _jQueryInterface() {
    /// 这里new的是function对象,不是class,因为没有`class`
    return new PmsLib(option);
  };
}
相关文章
|
22天前
|
消息中间件 JavaScript 中间件
函数计算产品使用问题之WebIDE编写的Node.js代码是否会自动进行打包部署
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
24天前
|
JavaScript 数据可视化
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
17 1
JS如何优雅的实现模块自动滚动展示
|
11天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
17天前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
17 2
|
1天前
|
JavaScript 中间件 Shell
Node.js JXcore 打包
Node.js 是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore 是一个支持多线程的 Node.js 发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 这篇文章主要是要向大家介绍 JXcore 的打包功能。
|
25天前
|
算法 JavaScript 前端开发
国标非对称加密:RSA算法、非对称特征、js还原、jsencrypt和rsa模块解析
国标非对称加密:RSA算法、非对称特征、js还原、jsencrypt和rsa模块解析
101 1
|
27天前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
64 0
Vue项目打包后都产生了哪些JS请求?
|
1月前
|
存储 缓存 JSON
Node.js有哪些模块系统
【8月更文挑战第12天】Node.js有哪些模块系统
32 3
|
1月前
|
算法 JavaScript 前端开发
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
88 1
|
2月前
|
监控 JavaScript 前端开发
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决