Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exporting a class with Webpack and Babel not working

I have a very simple setup with Webpack and Babel for a small library.

Before, I had the following architecture to generate a ES5 version of the library:

module.exports.lib = (function () {
    /* private part of library here */

    return {
        ... /* public part of library here */
    }
})();

Everything is working fine this way, and I even had some ES6 features such as arrow functions inside my library and everything worked. However, I decided to change my approach to a ES6 class, this way:

export default class Library {

}

And now, when I try to do:

var library = new Library();

I get that Library was not defined. Even just evaluating Library returns undefined.

So what I did was turn the file that uses the library into an ES6 file that does import Library from 'libraryfile.js' and it worked again.

However, I'd really like my output library to still be usable from regular ES5 with a <script> tag just like before. Is this possible?

Here's my webpack config file:

module.exports = {
  entry: {
    pentagine: "./lib/pentagine.js",
    demos: ["./demos/helicopter_game/PlayState.js"]
  },

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};
like image 831
David Gomes Avatar asked Jun 19 '16 23:06

David Gomes


People also ask

Does Webpack use Babel by default?

Webpack does not contain Babel or uglify by default. These are contained within the loaders. These are seperate npm packages you need to install used in the configuration.

Is Webpack the same as Babel?

Babel can be classified as a tool in the "JavaScript Compilers" category, while Webpack is grouped under "JS Build Tools / JS Task Runners".

What does Webpack command in Babel do?

We will use webpack to bundle multiple js files into a single file. Babel will be used to compile the es6 code to es5. We have used export to use the details of the Person class.


2 Answers

Default exports are stored in the default property of the module. If you want to make your library accessible without users having to know that, you can change your webpack entry file to

module.exports = require('./libraryfile').default;

Also, make sure you have library: 'YourLibraryName' in your webpack config as per webpack.github.io/docs/configuration.html#output-library.

like image 146
Felix Kling Avatar answered Sep 19 '22 14:09

Felix Kling


Webpack has changed a lot, now you can get the same results as the Felix Kling answer but with webpack config. You should add the libraryExport key in the output config and set it to "default". That would set your main class as the root content of your library. Here are the docs.

Your webpack config should be like this:

module.exports = {
  entry: {
    pentagine: "./lib/pentagine.js",
    demos: ["./demos/helicopter_game/PlayState.js"]
  },

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    libraryTarget: 'umd',
    libraryExport: 'default' //<-- New line
  },

  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};
like image 31
Matias Perez Avatar answered Sep 18 '22 14:09

Matias Perez