Целевая библиотека webpack 4 umd x не является конструктором

у меня есть этот класс es6 в моем /src/index.js

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

export default Point;

вот файл webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    library: 'point',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

поэтому, когда я включаю в свой файл index.html вот так:

<!DOCTYPE html>
<html>
<head>
    <title>Webpack</title>
</head>
<body>

    <!-- Scripts -->
    <script src="dist/bundle.js"></script>

    <script type="text/javascript">
        new point(1, 3).toString()
    </script>
</body>
</html>

так что у меня эта ошибка в консоли

«Uncaught TypeError: точка не является конструктором»

это тип сценария umd

почему я вижу эту ошибку при компиляции с помощью webpack?

тот же сценарий отлично работает с накоплением

есть ли решение?

и еще одна вещь, которую я видел, почти каждый разработчик использовал накопительный пакет для разработки пакета es6 для компиляции версий сценария "esm", "umd".

но я хочу использовать веб-пакет вместо накопительного пакета.

какой-нибудь гид?

Благодарность


webpack javascript webpack-4
person Nama Cool    schedule 08.12.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Добавьте libraryExport: 'default' в раздел output конфигурации Webpack.

что-то вроде этого (для вашего случая),

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    library: 'point',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    libraryExport: 'default',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
person theAnubhav    schedule 15.07.2019