Javascript 在webpack 2中使用自己的模块_Javascript_Module_Amd_Webpack 2

Javascript 在webpack 2中使用自己的模块

javascript module

Javascript 在webpack 2中使用自己的模块,javascript,module,amd,webpack-2,Javascript,Module,Amd,Webpack 2,目前我正在努力理解Webpack和AMD。这里是一个简单的例子，我写的学习目的。我的问题是如何访问Model（）？这无法按预期工作，因为我的浏览器控制台给了我一个引用错误。我希望模型在全球范围内 webpack.config.js： var path = require('path'); var webpack = require('webpack'); const config = { output : { filename : '[name].bundle.js',

目前我正在努力理解Webpack和AMD。这里是一个简单的例子，我写的学习目的。我的问题是如何访问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>

mod1.js：

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

            model.test = "bla";

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

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

        model.test = "bla";

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

    return result;
});

更新1 经过一些实验，我发现返回一个对象对我来说是可行的，只要修改entry.js

mod1.js：

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

            model.test = "bla";

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

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：

require("./mod1");

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

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

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

在这一点上有一个新的问题。如果我希望模型是全局可访问的，该怎么办？

不会返回

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
中的代码？是的，我可以打开bundle文件。任何关于无法访问模型的提示更新结果为：mod1.Model不是构造函数此答案表明您正在尝试执行的操作是可能的