javascript - Exporting a class with Webpack and Babel not working - Stack Overflow

admin管理员组

文章数量:1188830

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']
        }
      }
    ]
  }
};

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']
        }
      }
    ]
  }
};

• javascript
• ecmascript-6
• webpack
• babeljs

Share Improve this question Follow edited Jun 19, 2016 at 23:46 David Gomes asked Jun 19, 2016 at 23:25 David GomesDavid Gomes 5,8151616 gold badges6262 silver badges104104 bronze badges 5

• "However, I'd really like my output library to still be valid ES5. Is this possible?" Babel already does that... – Felix Kling Commented Jun 19, 2016 at 23:33
• @FelixKling Yes, it is valid ES5, but I want I meant is that I want it to be usable by regular ES5 code with a normal script tag. I'll edit the question. – David Gomes Commented Jun 19, 2016 at 23:46
• This might help: stackoverflow.com/q/33678869/218196 – Felix Kling Commented Jun 19, 2016 at 23:49
• It helped as I learnt quite a lot but it doesn't seem to be the same issue as using the add-module-exports plugin didn't fix the problem. – David Gomes Commented Jun 20, 2016 at 0:05
• did you solve this problem I am also facing the same error? – jax Commented May 26, 2021 at 3:48

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

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.

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']
        }
      }
    ]
  }
};

As Matias points out, webpack must be configured to export the default in order to avoid your client code doing const MyLibrary = require('MyLibrary').default

In 2021, using webpack 5, the correct config is:

module.exports = {
    
    output: {
        filename: '[name].bundle.js',
        library: {
            name: 'MyLibrary',
            type: 'umd',
            export: 'default' //<--- important
        },
    },

    // specify entry and other configs per usual..
}

ref: https://webpack.js.org/configuration/output/#outputlibraryexport

本文标签： javascriptExporting a class with Webpack and Babel not workingStack Overflow