前端开发实例：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);
  };
}