我正在努力将一些遗留代码转移到Webpack中(以帮助我控制我所拥有的一些依赖性地狱。到目前为止一切都很顺利。问题来自Knockout的现有代码使用。我需要一种访问各种组件中的视图模型的方法。所以我需要一些东西来保存这个视图模型。这个问题似乎为我提供了一个很好的解决方案：
将变量放入模块中
Webpack只评估模块一次，因此您的实例保持全局并从一个模块传递到另一个模块。所以如果你创造类似globals.js，并导出所有全局变量的对象然后您可以导入/globals和对这些globals的读/写。
不过我真的不知道该怎么做。我对webpack/import/export语句还很陌生，所以我对基本原理还不了解。我想要一个"模块"。很好，webpack对此有什么要说的：
什么是webpack模块
与Node.js模块不同，webpack模块可以表达的各种依赖性
什么？真的吗，就这样？！所以我很难接受什么是模块，以及我应该如何使用模块？
到目前为止，我已经定义了导出的函数并导入了它们(这些是模块吗？！)。所以我会这样做：
export default function koModule(){
var viewModel = {}
function setViewModel(vm){
viewModel = vm;
}
function getViewModel(){
return viewModel;
}
return {
setViewModel:setViewModel,
getViewModel : getViewModel
}
}
我想我可以在创建我的初始视图模型时使用这个：
import koModule from './koModule.js'
...
//obviously wrong....
var myKoModule = koModule();
myKoModule.setViewModel(vm);
...
但这显然是错误的，因为每次调用函数时都会实例化myKoModule。。。任何试图读取它的模块都会得到一个空白对象：
import koModule from './koModule.js'
...
//obviously wrong....
var myKoModule = koModule();
var vm = myKoModule.getViewModel();
//vm is undefined...
在上一个问题中，它指出"Webpack只评估模块一次">。所以我显然不知道什么是模块，以及我应该如何使用它们。
鉴于我的要求，有人能提供一个工作Webpack"模块"的例子吗？它在保存、读取和写入全局变量时的用法，同时仍然允许我import它
我显然错过了一些基本的东西，但我真的不知道它是什么
这是我所能为您提供的最接近的方法，而不知道您想如何使用您的模型以及不想使用什么。这通常是我在webpack中使用viewModels的方式，它们本质上只是带有内置方法的构造函数，我可以在需要时调用这些方法。
Main.js
import ko from 'knockout'
import koModule from './koModule.js'
const model = new koModule('Budhead2004 was here', 'More Stuff here');
ko.applyBindings(model);
KoModule.js
import ko from 'knockout'
// This is your viewModel
class koModule {
constructor(r,t) {
this.Test1 = ko.observable(t);
this.Something = ko.observable(r);
this.Click1 = function() {
alert('test')
}
}
}
export default koModule
HTML
<!-- language: html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 data-bind="text: Something"></h1>
<input type="text" data-bind="textInput: Test1" />
<span data-bind="text: 'Results of Test1: ' + (Test1() ? Test1() : '')"></span>
<br>
<button data-bind="click: Click1">Click Me</button>
<script src="main.js"></script>
</body>
</html>
此处的工作示例