Question

我正在尝试在webpack上关注本教程

http://blog.madewithlove.be/post/webpack-your-bags/

我被指示用下面的代码创建一个src / index.js：

if (document.querySelectorAll('a').length) {
    require.ensure([], () => {
        const Button = require('./Components/Button');
        const button = new Button('google.com');

        button.render('a');
    });
}

当我运行webpack然后查看网页时，我的chrome开发人员工具在控制台中报告以下错误

Caught TypeError: Button is not a constructor

发生了什么事？我该如何解决？

Answer 1

我想出了答案。我换了

        const button = new Button('google.com');

与

        const button = new Button.default('google.com');

我不明白它为什么会起作用，但它确实......我只是随机检查对象属性并尝试不同的东西，这似乎解决了所有问题。

Answer 2

require.ensure和require是 ES5 commonJS模式，看起来您的./Components/Button模块最有可能使用export default语法<强> ES6 ，因此：

ES6 中的

import Button from './Components/Button'与 ES5

中的require('./Components/Button').default 未来

而不是使用require.ensure，您将能够在Webpack 2.0中使用System.import

https://webpack.github.io/docs/roadmap.html#2

使用javascript webpack require.ensure错误

2 个答案: