postal.xframe and webpack

[RainerAtSpirit]

postal.xframe (bower) won't work OOTB with webpack.

Seems that the order of AMD vs CommonJS check in this environment must be CommonJS first like in postal.federation.

(function( root, factory ) {
    if ( typeof module === "object" && module.exports ) {
        // Node, or CommonJS-Like environments
        module.exports = function( postalFed ) {
            return factory( require( "lodash" ), postalFed );
        };
    } else if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( [ "lodash", "postal.federation" ], function( _, postal ) {
            return factory( _, postal, root );
        } );
    } else {
        // Browser globals
        root.postal = factory( root._, root.postal, root );
    }
}( this, function( _, postal, global, undefined ) {

    //import("xframe.js");

    return postal;

} ));

While this violates the consense made in http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/#update2 reversing the order solves the issue for webpack.

[ifandelse]

@RainerAtSpirit Can you provide more detail on what errors you are running into with this UMD wrapper with webpack, as well as versions (of postal.xframe and webpack ,etc.)? My team at LeanKit is using webpack with a number of libraries with UMD wrappers that perform the AMD check first without any issue - so this is a surprise to me. Thanks!

[RainerAtSpirit]

@ifandelse This might be an edge case when using require.ensure in combination with bower components. My goal was to load all postal dependencies as a named postal chunk. During testing I noticed that postal.federation was loading as expected (component first check), but postal.xframe was failing (AMD first check).

webpack: 1.6.0

bower components:
postal "version": "1.0.6",
postal.federation "version": "0.2.4",
postal.xframe "version": "0.3.2",
postal.request-response "version": "0.3.1"

require.ensure(['postal', 'riveter', 'postal.federation', 'postal.xframe', 'postal.request-response'], function( require ) {

    var postal = require('postal');
    var riveter = require('riveter');
    var federation = require('postal.federation')(_, postal, riveter);

    //todo: Workaround. Requires changing the order of AMD vs Module test in bower_components/postal.xframe/lib/postal.xframe.js

    var xframe = require('postal.xframe')(federation);

    require('postal.request-response');

    console.log('postal', federation);

    // waiting for all promises to be resolved
    $.when.apply($, promises).then(function() {

        ko.applyBindings(koViewModel, element);

        // Kick off postal example
        require('./main')(postal, listsInfo, dsMap);

    });

}, 'postal');

[RainerAtSpirit]

@ifandelse I've created a small sample repo that demonstrates the behavior. All sources included so a webpack-dev-server --content-base . in the root directory should get you started.

https://github.com/RainerAtSpirit/postalWebpack

Good news there's a webpack configuration that prevents execution of the AMD check in postal.xframe. That way at least there's no need to modify the sources.

var xframe = require('imports?define=>false!postal.xframe')(postal);

https://github.com/RainerAtSpirit/postalWebpack/blob/master/src/app/postal.js#L10

[fabiobon]

I've got some problems using require.js with postal, postal.xframe, postal.federation

1. I've tried to declare 'postal' before 'postal.federation' inside postal.xframe define.amd and I'm solved first error (Uncaught TypeError: undefined is not a function).
2. When I'm trying to declare postal.instanceId("parent"); inside main.js file handlers.js generates an error
   "postal is not defined"

I'm not a require.js guru. Does exists an example that explains how to use them.
Thanks