个人中心
gpt4 book ai didi

javascript - webpack 4 库目标 umd x 不是构造函数

转载 作者：行者123 更新时间：2023-12-01 01:27:00 26 4
gpt4 key购买 nike

我的/src/index.js 中有这个 es6 类

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: point is not a constructor"

这是 umd 脚本类型

为什么我在使用 webpack 编译时会看到此错误？

相同的场景使用汇总工作正常

有什么解决办法吗？

还有一件事，我看到几乎每个开发人员都使用 rollup 进行 es6 包开发来编译脚本的“esm”、“umd”版本。

但我想使用 webpack 而不是 rollup。

有什么指南吗？

谢谢

最佳答案

请在 Webpack 配置的 output 部分添加 libraryExport: 'default'。

类似这样的东西(针对您的情况)，

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

关于javascript - webpack 4 库目标 umd x 不是构造函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53683089/

26 4 0
文章推荐： javascript - 在 Angular 中使用 Javascript 库
文章推荐： pdf - 转换 PDF 文档中所有链接的缩放级别
文章推荐： javascript - 解释 JavaScript 函数的一部分
文章推荐： jquery加载回调函数失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com