Using UMD modules in the browser environment

Question

I am building a website and am using es6 modules in development which I need to transpile into a more browser compatible format.

One option seems to be UMD - Universal Module Definition, which states it runs in the browser and other environments. I am using Rollup and Babel to handle the transpilation.

I don't fully understand how UMD works, and therefore don't fully understand how widely in the browsers this will work.

The point that concerns me / confuses me most in the output, is the following two lines:

exports.PrintGreeting = PrintGreeting;
Object.defineProperty(exports, '__esModule', { value: true });

I do not understand exports or the Object method.

It would be good if somebody more knowledgable could offer up a more detailed explanation of how this works but most importantly my main reason for writing this question is - 'Is this cross browser compatible?' and 'Is this a good way to go for production env code?'

I have included my dev code, transpilation code and umd output code below. Thank you in advance for your help.

My es6 module:

export function PrintGreeting() {
  console.log('hello world')
}

My rollup file:

import babel from "rollup-plugin-babel";

export default {
    input: "main.js",
    output: {
        file: "dist/bundle.js",
    format: "umd",
    name: "Entry"
    },
    plugins: [
        babel({
            exclude: "node_modules/**"
        })
    ]
};

My output js (UMD) file:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.Entry = {}));
}(this, (function (exports) { 'use strict';

  function PrintGreeting() {
    console.log('hello world');
  }

  exports.PrintGreeting = PrintGreeting;

  Object.defineProperty(exports, '__esModule', { value: true });

})));

Using UMD modules in the browser environment

0 Answers0