将IIFE模块转换为RollupJS可导入的内容

时间:2017-12-27 21:30:25

标签: javascript ecmascript-6 iife rollupjs

我使用RollupJS作为捆绑器,它可以读取CommonJS(通过插件)或ES6模块。但是这个模块似乎是UMD格式,我正在寻找一种快速的方法来编辑它(不需要替换很多行),因此它是commonJS或ES6格式。

人们建议什么?我显示了5,000行.js文件的顶部和底部。

@module vrlinkjs
**/
(function (mak) {

mak.MessageKindEnum = {
        Any : -1,
        Other : 0,
        AttributeUpdate : 1,
        Interaction : 2,
        Connect : 3,
        ObjectDeletion : 4
    };
/**
    Decodes AttributeUpdate messages into an EnvironmentalStateRepository object.
    @class EnvironmentalStateDecoder
    @constructor
    @augments StateDecoder
    @param {WebLVCConnection} webLVCConnection Connection to a WebLVC server
    **/
    mak.EnvironmentalStateDecoder = function(webLVCConnection) {
        mak.StateDecoder.apply(this, arguments);
    };

    mak.EnvironmentalStateDecoder.prototype = Object.create(mak.StateDecoder.prototype, {
        constructor : { value : mak.EnvironmentalStateDecoder },

        /**
        Decodes a AttributeUpdate message into an EntityStateRepository object.
        @method decode
        @param {Object} attributeUpdate WebLVC AttributeUpdate message
        @param {EntityStateRepository} stateRep State repository to be updated
        **/
        decode : {
            value : function( attributeUpdate, stateRep ) {

                // if(this.webLVCConnection.timeStampType == mak.TimeStampType.TimeStampAbsolute &&
                    // attributeUpdate.TimeStampType == mak.TimeStampType.TimeStampAbsolute) {
                // } else {
                    // stateRep.timeStampType = mak.TimeStampType.TimeStampRelative;
                // }
                stateRep.timeStampType = mak.TimeStampType.TimeStampRelative;

                var curTime = 0.0;
                // if (stateRep->timeStampType() == DtTimeStampAbsolute)
                // {
                // // Use timestamp as time of validity
                // curTime = pdu.guessTimeValid(myExConn->clock()->simTime());
                // }
                // else
                // {
                // // Use receive time as time of validity
                // curTime = myExConn->clock()->simTime();       
                // }
                curTime = this.webLVCConnection.clock.simTime;

                 if(attributeUpdate.ProcessIdentifier != undefined) { 
                    stateRep.entityIdentifier = attributeUpdate.EntityIdentifier;
                }
                if(attributeUpdate.Type != undefined) { 
                    stateRep.entityType = attributeUpdate.Type;
                }
                if(attributeUpdate.ObjectName != undefined) { 
                    stateRep.objectName = attributeUpdate.ObjectName;
                }
                if(attributeUpdate.GeometryRecords != undefined) {
                    stateRep.GeometryRecords = attributeUpdate.GeometryRecords;
                }
                if(attributeUpdate.EnvObjData != undefined) {
                   if(attributeUpdate.EnvObjData.VrfObjName != undefined) {
                      stateRep.marking = attributeUpdate.EnvObjData.VrfObjName;
                   }
                }
            }
        }           
    });
.....

} (this.mak = this.mak || {}));

更新

我使用了estus(下面)的ES6模块解决方案,我非常喜欢。它解决了汇总更新问题,但仍然存在运行时错误。

但还有一点需要做。我用chrome得到了这个错误。我有两个HTML main.html文件的变种,一个使用捆绑,另一个只导入我的es6模块。即使我没有使用汇总并创建和使用捆绑包,也会发生错误。

Uncaught TypeError: Cannot set property objectName of [object Object] which has only a getter
    at mak$1.ReflectedEntity.mak$1.ReflectedObject [as constructor] (vrlink.mjs:818)
    at new mak$1.ReflectedEntity (vrlink.mjs:903)
    at mak$1.ReflectedEntityList.value (vrlink.mjs:1358)
    at mak$1.WebLVCMessageCallbackManager.<anonymous> (vrlink.mjs:1155)
    at mak$1.WebLVCMessageCallbackManager.processMessage (vrlink.mjs:1745)
    at mak$1.WebLVCConnection.drainInput (vrlink.mjs:2139)
    at SimLink.tick (SimLink.js:34)

从IIFE模块转换到ES6时,这似乎是违法者。它说没有制定者。

代码不是我的创作,但似乎不应该是将IIFE转换为ES6的主要工作。有问题的片段是:

mak.VrfBackendStateRepository = function (objectName) {

/**
Unique string identifying entity
@property objectName 
@type String
**/
this.objectName = objectName;   //error generated on this line!

如果您想知道这个是什么,它是一个名为mak.webLVConnection的对象,它由IIFE代码中的此函数创建:

/**
    Represents a connection to a WebLVC server.
    clientName and port are required.  webLVCVersion is optional (current version
    supported by the WebLVC server will be in effect).  serverLocation is optional
    ( websocket connection will be made to the host servering the javascript )
    @class WebLVCConnection 
    @constructor
    @param {String} clientName String representing name of the client federate
    @param {Number} port Websocket port number
    @param {Number} webLVCVersion WebLVC version number
    @param {String} serverLocation Hostname of websocket server
    **/
mak.WebLVCConnection = function (clientName, port, webLVCVersion, serverLocation, url) {

    var self = this;

    if (clientName == undefined) {
        throw new Error("clientName not specified");
    }
    if (!(typeof clientName == "string" && clientName.length > 0)) {
        throw new Error("Invalid ClientName specified");
    }
    if (port == undefined) {
        throw new Error("Port not specified");
    }
    if (url == undefined) {
        url = "/ws";
    }

    var websocket;
    if (serverLocation == undefined) {
        if (location.hostname) {
            websocket = new WebSocket("ws://" + location.hostname + ":" + port + url);
        }
        else {
            websocket = new WebSocket("ws://localhost:" + port + "/ws");
        }
    }
    else {
        websocket = new WebSocket("ws://" + serverLocation + ":" + port + url);
    }

    /**
    Websocket connected to a WebLVC server.
    @property websocket
    @type WebSocket
    **/
    this.websocket = websocket;

    /**
    DIS/RPR-style identifier, used to generate new unique IDs for entities simulated
    through this connection.   Array of 3 numbers [site ID, host ID, entity number].
    @property currentId
    @type Array
    **/
    this.currentId = [1, 1, 0];

    /**
    Manages registration and invoking of message callbacks.
    @property webLVCMessageCallbackManager
    @type WebLVCMessageCallbackManager
    **/
    this.webLVCMessageCallbackManager = new mak.WebLVCMessageCallbackManager();

    /**
    Simulation clock
    @property clock
    @type Clock
    **/
    this.clock = new mak.Clock();

    /**
    Indicates whether timestamping is relative or absolute
    (mak.TimeStampType.TimeStampRelative or 
    mak.TimeStampType.TimeStampAbsolute).
    @property {Number} timeStampType
    **/
    this.timeStampType = mak.TimeStampType.TimeStampRelative;

    /**
    List of incoming messages.  When messages are received, they are placed
    in this queue.  The drainInput() member function must be called regularly
    to remove and process messages in this queue.
    @property {Array} messageQueue
    **/
    this.messageQueue = new Array();

    /**
    Callback function invoked on receipt of a message.  Calls 
    webLVCMessageCallbackManager.processMessage().
    @method processMessage
    @private
    **/
    this.processMessage = this.webLVCMessageCallbackManager.processMessage.bind(this.webLVCMessageCallbackManager);

    /**
    Callback function invoked when websocket connection is opened.  Sends
    the initial WebLVC connect message.
    @method onopen
    @private
    **/
    this.websocket.onopen = function () {
        var connectMessage = {
            MessageKind: mak.MessageKindEnum.Connect,
            ClientName: clientName
        }

        if (webLVCVersion != undefined) {
            connectMessage.WebLVCVersion = webLVCVersion;
        }

        if (self.websocket.readyState == 1) {
            self.websocket.send(JSON.stringify(connectMessage));
        }
    };

    /**
    Callback function invoked when a WebLVC message is received.  Parses the
    the JSON message data and passes the resulting object to processMessage.
    @method onmessage
    @event {Object} JSON message
    @private
    **/
    this.websocket.onmessage = function (event) {
        //just in case
        if (event.data == "ping")
            return;

        var message = JSON.parse(event.data);
        if (message != null) {
            self.messageQueue.push(message);
        } else {
            console.warn("onmessage - null message received");
        }
    };

    /**
    Callback function invoked when the websocket is closed.
    @method onclose
    @private
    **/
    this.websocket.onclose = function () {
        console.debug("In websocket.onclose");
    };

    /**
    Callback function invoked when an error in the websocket is detected.
    Sends warning to console.
    @method onerror
    @private
    **/
    this.websocket.onerror = function () {
        console.log("websocket onerror");
    };

    this.isOk = function () {
        return this.websocket.readyState == 1;
    }
};

mak.WebLVCConnection.prototype = {

    constructor: mak.WebLVCConnection,

    /**
    Set the DIS/RPR-style application ID.
    @method set applicationId
    @param {Array} applicationId Array of 2 integers [site ID, host ID].
    **/
    set applicationId(applicationId) {
        this.currentId[0] = applicationId[0];
        this.currentId[1] = applicationId[1];
        this.currentId[2] = 0;
    },

    /**
    Returns next available DIS/RPR-style entity ID.
    @method nextId
    @return {Array} Array of 3 integers [site ID, host ID, entity number].
    **/
    get nextId() {
        this.currentId[2]++;
        return this.currentId;
    },

    /**
    Register callback function for a given kind of message.
    @method addMessageCallback
    @param {Number} messageKind WebLVC MessageKind
    @param callback Function to be invoked
    **/
    addMessageCallback: function (messageKind, callback) {
        this.webLVCMessageCallbackManager.addMessageCallback(messageKind, callback);
    },

    /**
    De-register callback function for a given kind of message.
    @method removeMessageCallback
    @param messageKind WebLVC MessageKind
    @param callback Function to be invoked
    **/
    removeMessageCallback: function (messageKind, callback) {
        this.webLVCMessageCallbackManager.removeMessageCallback(messageKind, callback);
    },

    /**
    Send a WebLVC message to the server.
    @method send
    @param {Object} message
    **/
    send: function (message) {
        try {
            if (this.websocket.readyState == 1) {
                this.websocket.send(JSON.stringify(message));
            }
        } catch (exception) {
            console.log("Error sending on websocket - exception: " + exception);
        }
    },

    /**
    Send a time-stamped WebLVC message to the server.
    @method sendStamped
    @param {Object} message
    **/
    sendStamped: function (message) {
        // Timestamp is hex string
        var timeStamp = this.currentTimeForStamping().toString(16);
        //message.TimeStamp = ""; // timeStamp;

        this.send(message);
    },

    /**
    Get the current simulation time for a time stamp.
    @method currentTimeForStamping
    @return {Number} Simulation time in seconds.
    **/
    currentTimeForStamping: function () {
        if (this.timeStampType == mak.TimeStampType.TimeStampAbsolute) {
            return this.clock.simTime();
        }
        else {
            return this.clock.absRealTime();
        }
    },

    /**
    Iterate through message queue, calling processMessage() and then
    removing each message.  Should be called regularly from your 
    application.
    @method drainInput
    **/
    drainInput: function () {
        var message;

        while (this.messageQueue.length > 0) {
            message = this.messageQueue.shift();
            this.processMessage(message);
        }
    },

    /**
    Closes the websocket connection.  Calls the destroy method on its 
    WebLVCMessageCallbackManager data member.
    @method destroy
    **/
    destroy: function () {
        console.debug("In WebLVCConnection.destroy");
        this.webLVCMessageCallbackManager.destroy();
        this.websocket.close();
    }
};

2 个答案:

答案 0 :(得分:1)

根据定义,UMD模块是CommonJS。上面的代码只是IIFE,依赖mak全局。

IIFE包装函数可以替换为默认或命名的ES模块导出:

const mak = {};

mak.MessageKindEnum = { ... };
...

export default mak;

或使用CommonJS导出:

const mak = {};

mak.MessageKindEnum = { ... };
...

module.exports = mak;

答案 1 :(得分:0)

你试过了吗?

(function (mak) {
  ...
}(module.exports));

// instead of 
// } (this.mak = this.mak || {}));