Import UMD style module with ES6, Webpack and Babel

Question

I found several StackOverflow questions related to this, but none of them matched and fixed my problem.

I am writing a library in ES6 that is intended to be used in a browser and on a server. I found several HTTP request libraries that can be used on the server or in the browser ( popsicle , axios ). I have successfully used these libraries in both places, but I have some problems importing them into the source code and using the output file with web packaging.

My ES6 source file, where I import the axios library,

 import axios from 'axios'; export default { go: function() { return axios.get('http://www.google.com'); } }; 

My webpack configuration

 var webpack = require('webpack'); var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; var WebpackNotifierPlugin = require('webpack-notifier'); var path = require('path'); var env = require('yargs').argv.mode; var libraryName = 'library'; var source = '/src/test.js'; var plugins = [], outputFile; if (env === 'build') { plugins.push(new UglifyJsPlugin({ minimize: true })); outputFile = libraryName + '.min.js'; } else { outputFile = libraryName + '.js'; plugins.push(new WebpackNotifierPlugin()) } var config = { entry: __dirname + source, devtool: 'source-map', output: { path: __dirname + '/lib', filename: outputFile, library: libraryName, libraryTarget: 'umd', umdNamedDefine: true }, externals: {}, module: { loaders: [{ test: /(\.jsx|\.js)$/, loader: 'babel', exclude: /(node_modules|bower_components)/ }, { test: /(\.jsx|\.js)$/, loader: "eslint-loader", exclude: /node_modules/ }] }, resolve: { root: path.resolve('./src'), extensions: ['', '.js'] }, plugins: plugins }; module.exports = config; 

As you can see, I set libraryTarget to umd and umdNamedDefine true

And my .bablerc is

 { "presets": ["es2015"], "plugins": ["add-module-exports", "babel-plugin-add-module-exports"] } 

I can use my library in the browser by including it in the script tag, but I cannot use it when importing using node. I get XMLHttpRequest is not defined . The axios library says that it uses XMLHttpRequest when in the browser and http when working in node, but for some reason it does not detect that it is running on the server. I am having problems with several UML libraries, so believe that this is not a specific package. Also, since I can use these libraries in node ES5 without running webpack or babel, it seems to me that this is a configuration problem with webpack.

How to import these UMD style libraries into ES6 and create a library with Webpack and Babel that can be used on the server and in the browser?

Answer 1

To make your package as small as possible, I would recommend using the Fetch API. The UMD library has three types of consumers where sampling comes in handy,

• Node.js - not implemented, but can use node-fetch for polyfill general behavior using only node libraries (without heavy dependencies like superagent, unirest and axios, etc. - this increases security and also bloat!).
• Browser - fetch is a WHATWG standard and is available in most modern browsers, but may require the npm package, for example, from whatwg-fetch to polyfill older browsers
• Isomorphic / Universal - the same javascript running in the browser and node.js that you will find in progressive web applications. They should use a library called isomorphic fetch to load either whatwg-fetch or node.js version of the fetch.

It should be handled by project consumers, although README should include instructions for each of the three types of users above.

Node.js and isomorphic instructions are basically as shown below.

 require('node-fetch'); // or require('isomorphic-fetch') const MyUMDLibrary = require('my-umd-library'); const myUMDLibrary = new MyUMDLibrary(); 

For browsers using a script from cdn, they can also download fetch polyfill before https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js .

I would suggest using rollup for the UMD library ( see the working example I introduced earlier for the UMD library ), but Webpack should not be a problem either. Instead of trying to enable the "axios" dependency in your application using Fetch, you can leave it and let your users decide how they will load the package (for example, module loader, script).