javascript - How to properly Webpack library export? - Stack Overflow

admin管理员组

文章数量:1313140

First real foray into using webpack, and I'm trying to create a reusable library. I can't figure out how to properly export my library classes. Here's a general rundown of what I'm currently doing, and how I'm trying to use what's been built.

I have an entry point like so:

import ClassA from './classA';
import ClassB from './classB';

export {ClassA, ClassB};

That I would like to use the built library to import my classes when needed in my application:

import {ClassA} from './libs/library.js'; // currently using chrome flags for testing

But I can not figure out the right 'output' configuration for my webpack build. I'm using babel-env with a .babelrc like:

{
  "presets": [[
    "env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }
  ]]
}

and a webpack config like:

const path = require('path');

export default () => ({
    entry: __dirname + '/src/index.js',
    output: {
        path: path.resolve(__dirname, './libs'),
        filename: 'library.js',
        libraryTarget: 'umd',
        library: ''
    },
    externals: {},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "eslint-loader"
            }
        }]
    },
    resolve: {
        modules: [path.resolve('./node_modules'), path.resolve('./src')],
        extensions: ['.json', '.js']
    }
});

But, when trying to use my classes, via the import shown earlier, I get an error:

Uncaught SyntaxError: The requested module does not provide an export named 'ClassA'

Anyone have an idea what I'm doing wrong? I'm sure I'm just missing the right configuration of webpack options, but hours of Google have not helped.

First real foray into using webpack, and I'm trying to create a reusable library. I can't figure out how to properly export my library classes. Here's a general rundown of what I'm currently doing, and how I'm trying to use what's been built.

I have an entry point like so:

import ClassA from './classA';
import ClassB from './classB';

export {ClassA, ClassB};

That I would like to use the built library to import my classes when needed in my application:

import {ClassA} from './libs/library.js'; // currently using chrome flags for testing

But I can not figure out the right 'output' configuration for my webpack build. I'm using babel-env with a .babelrc like:

{
  "presets": [[
    "env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }
  ]]
}

and a webpack config like:

const path = require('path');

export default () => ({
    entry: __dirname + '/src/index.js',
    output: {
        path: path.resolve(__dirname, './libs'),
        filename: 'library.js',
        libraryTarget: 'umd',
        library: ''
    },
    externals: {},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "eslint-loader"
            }
        }]
    },
    resolve: {
        modules: [path.resolve('./node_modules'), path.resolve('./src')],
        extensions: ['.json', '.js']
    }
});

But, when trying to use my classes, via the import shown earlier, I get an error:

Uncaught SyntaxError: The requested module does not provide an export named 'ClassA'

Anyone have an idea what I'm doing wrong? I'm sure I'm just missing the right configuration of webpack options, but hours of Google have not helped.

• javascript
• webpack
• ecmascript-6
• bundle
• babeljs

Share Improve this question Follow edited Dec 28, 2017 at 13:13 Steve -Cutter- Blades asked Dec 20, 2017 at 18:19 Steve -Cutter- BladesSteve -Cutter- Blades 5,44233 gold badges2929 silver badges4545 bronze badges 2

• 1 Try export default instead of your present export – David R Commented Jan 2, 2018 at 13:50
• 6 Where I'm trying to make multiple classes available from my module, I'm not sure how export default would help me?... – Steve -Cutter- Blades Commented Jan 2, 2018 at 13:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There seems to be a long-standing feature request in Webpack to resolve this.

In the meantime, you may be able to do a simple import './classA', which should add the variables to the global scope (this is the default behaviour of the libraryTarget: 'umd' option)

本文标签： javascriptHow to properly Webpack library exportStack Overflow