在 webpack 2 中使用自己的模块
Using own modules in webpack 2
目前我正在尝试了解 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>
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
函数没有返回。尝试
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;
}
}
});
目前我正在尝试了解 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>
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
函数没有返回。尝试
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;
}
}
});