Question

我在module1.js文件中有这样的示例模块：

export const Module1 = (function() {

    'use strict';

    function init()
    {
        console.log('init');
    }

    return {
        init: init
    };

}());

在bootstrap.js文件中，我有：

require('./module1');

在app.js中，我使用：

require('./boostrap');

$(function() {
    Module1.init();
});

但是我得到了：

未捕获的ReferenceError：未定义Module1

当我尝试启动时也是如此：

Module1.init();

在bootstrap.js

中

以防万一-我不是JavaScript专家，所以请逐步向我解释如果需要合适的解决方案，这有什么问题。我将Laravel mix用于Webpack，但未对Webpack使用任何自定义配置。

Answer 1

Javascript中的

require不能像其他语言一样工作。它不导入代码，而是模块。

让我们来看一下您拥有的3个模块：Module1，Bootstrap和App。

Bootstrap需要Module1，该功能在您导出文件模块1.js中的模块后即可起作用：

export const Module1 = [...]

但是，文件bootstrap.js仅导出模块Bootstrap。它不会导出Module1。

您必须在App.js中导入Module1才能使用它。

Answer 2

我正在尝试不同的场景，看来解决方案正在这样做：

const Module1 = (function() {

    'use strict';

    function init()
    {
        console.log('init');
    }

    return {
        init: init
    };

}());

export default Module1;

然后在bootstrap.js中像这样包含它：

import Module1 from './module1';

在bootstrap.js中，我可以运行：

Module1.init();

但是它不能使Module1.init()在app.js中工作，所以我终于从boostrap.js删除了此导入，现在我的app.js看起来像这样：

require('./boostrap');
import Module1 from './module1';

$(function() {
    Module1.init();
});

显示模块模式和Webpack

2 个答案: