Output an ES module using webpack

by

Firstly I would like to state the difference between the commonJS and commonJS2

CommonJS doesn’t support the use of module.exports = function() {} which is used by node.js and many other commonJS implementations.

Webpack2 employs the concept of the bundling the library code and for the widespread use of it and to make it compatible of working in different environments we use the —libraryTarget option

Now the part here will answer both your questions

The possible library options supported in webpack2 are

  • libraryTarget: "umd", // enum
  • libraryTarget: "umd-module", // ES2015 module wrapped in UMD
  • libraryTarget: "commonjs-module", // ES2015 module wrapped in CommonJS
  • libraryTarget: "commonjs2", // exported with module.exports
  • libraryTarget: "commonjs", // exported as properties to exports
  • libraryTarget: "amd", // defined with AMD defined method
  • libraryTarget: "this", // property set on this
  • libraryTarget: "var", // variable defined in root scope

Interlop has the following meaning

In order to encourage the use of CommonJS and ES6 modules, when exporting a default export with no other exports module.exports will be set in addition to exports["default"] as shown in the following example

export default test;
exports["default"] = test;
module.exports = exports["default"];

So basically it means that the commonJS-module can be used by exposing it as module.exports by using the interloping with ES2015 module wrapped in commonJS

More info about the interloping can be found in this blogpost and the stackoverflow link to it.

The basic idea is in ES6 runtime export and import properties cannot be changed but in commonJS this works fine as the require changes happen at runtime therefore it has ES2015 is interloped with the commonJS.

Update

Webpack 2 gives the option of creating the library which can be bundled and included.

If you want your module to be used in different environments then you can bundle it as a library by adding the library options and output it to your specific environment. Procedure mentioned in the docs.

Another simple example on how to use commonjs-module

Important point to note here is babel adds exports.__esModule = true to each es6 module and on importing it calls for the _interopRequire to check that property.

__esModule = true need to be set only on library export. It need to be set on the exports of the entry module. Inner modules don’t need __esModule, it’s just a babel hack.

As mentioned in the docs

__esModule is defined (it’s threaded as ES2015 Module in interop mode)

Usage as mentioned in the test cases

export * from "./a";
export default "default-value";
export var b = "b";

import d from "library";
import { a, b } from "library";

More Related Contents:

  1. Javascript object bracket notation ({ Navigation } =) on left side of assign
  2. Is it possible to import modules from all files in a directory, using a wildcard?
  3. Pass options to ES6 module imports
  4. `export const` vs. `export default` in ES6
  5. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  6. Define global variable with webpack
  7. ES6 Modules: Undefined onclick function after import
  8. ES2015 import doesn’t work (even at top-level) in Firefox
  9. Getting Unexpected Token Export
  10. What does the @ mean inside an import path?
  11. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  12. webpack dynamic module loader by require
  13. ES6 Destructuring and Module imports
  14. Is using an ES6 import to load specific names faster than importing a namespace?
  15. When should I use brackets with imports
  16. where is create-react-app webpack config and files?
  17. How can I alias a default import in JavaScript?
  18. Webpack babel 6 ES6 decorators
  19. Are ES6 module imports hoisted?
  20. Not recommended to use “use strict” in ES6?
  21. Inlining ECMAScript Modules in HTML
  22. What is the defined execution order of ES6 imports?
  23. What is the difference between importing a function expression or a function declaration from a ES6 module?
  24. Webpack bundles my files in the wrong order (CommonsChunkPlugin)
  25. How will browsers handle ES6 import/export syntax
  26. In the `import` syntax of ES6, how is a module evaluated exactly?
  27. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  28. Import ES module in Next.js ERR_REQUIRE_ESM
  29. Re-export default in ES 6 modules
  30. How does JavaScript import find the module without an extension?

Leave a Comment