在 webpack 2 中使用自己的模块答案

【问题标题】：Using own modules in webpack 2在 webpack 2 中使用自己的模块
【发布时间】：2017-07-21 01:03:12
【问题描述】：

目前我正在尝试了解 Webpack 和 AMD。这是我为学习目的而编写的一个简单示例。我的问题是如何访问 Model()？这没有按预期工作，因为我的浏览器控制台给了我一个参考错误。我希望 Model 在全球范围内。

webpack.config.js：

var path = require('path');
var webpack = require('webpack');

const config = {
    output : {
        filename : '[name].bundle.js',
        path : 'assets'
    },
    entry : {
        main : ['./entry.js']
    }
};

module.exports = config;

test.html:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="assets/main.bundle.js" charset="utf-8"></script>
    </body>
</html>

entry.js：

require("./mod1");

test = new Model();
document.write(test.calculate());

mod1.js：

define([] ,function(){
    return function(){
        function Model() {
            var model = this;

            model.test = "bla";

            model.calculate = function(){
                return model.test + 45;
            }
        }
    }
});

更新 1 经过一些实验后，我发现返回一个对象对我有用，只需更改 entry.js

mod1.js：

define([] ,function(){
    var result = new Object();
    result.Model = function(){
        var model = this;

        model.test = "bla";

        model.calculate = function(){
            return model.test + 45;
        }   
    }

    return result;
});

entry.js：

var mod1 = require("./mod1");

var test = new mod1.Model();
document.write(test.calculate());

此时有一个新问题。如果我希望 Model 可以全局访问怎么办？

【问题讨论】：

标签： javascript module amd webpack-2

【解决方案1】：

不返回Model 函数。试试

define([] ,function(){
    return function(){
        return function Model() {
            ...
        }
    }
}

更新：

另外，您需要一个变量来保存返回的模块。试试：

var mod1 = require("./mod1");

在entry.js，那么你应该可以var test = new mod1.Model();

更新 2：

去掉mod1.js中的包装函数，应该是这样的：

define([] ,function(){
   return function Model() {
       var model = this;

       model.test = "bla";

       model.calculate = function(){
           return model.test + 45;
       }
   }
});

【讨论】：

这仍然会抛出异常“Uncaught ReferenceError: Model is not defined”
你能在生成的main.bundle.js中看到来自mod1的代码吗？
是的，我可以打开捆绑文件。在哪里查看为什么无法访问模型的任何提示
更新结果：mod1.Model不是构造函数
这个答案stackoverflow.com/questions/4869530/…表明你正在尝试做的事情是可能的