如何定义 Webpack "global module" 来保存我的 Knockout 视图模型？

Question

我正在努力将一些遗留代码转移到 Webpack 中（以帮助我控制我所拥有的一些依赖地狱。到目前为止一切顺利。问题来自现有代码对 Knockout 的使用。我需要一个在各种组件中访问视图模型的方法。所以我需要一些东西来保存这个视图模型。:

Put your variables in a module.

Webpack evaluates modules only once, so your instance remains global and carries changes through from module to module. So if you create something like a globals.js and export an object of all your globals then you can import './globals' and read/write to these globals.

虽然我真的不知道该怎么做。我对 webpack/import/export 语句很陌生，所以我不是最新的基础知识。我想要一个"Module"。很棒，webpack 对此有何评论：

What is a webpack Module

In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways

什么？原来，就这样？！所以我很难理解什么是模块以及我应该如何使用它？

到目前为止，我已经定义了导出函数并导入了它们（这些是模块吗？？！）。所以我会做这样的事情：

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 evaluates modules only once"。所以我显然不知道模块是什么以及我应该如何使用它们。

所以根据我的要求，有人可以提供一个工作 Webpack 的示例 "Module" 以及它在保存、读取和写入全局变量时的用法，同时仍然允许我 import吗?

我显然在这里遗漏了一些基本的东西，但我真的不知道它是什么。

Answer 1

这是我能为您提供的最接近的结果，但您还不知道您希望如何使用您的模型以及不希望如何使用您的模型。这通常是我在 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>

Working example here

如何定义 Webpack "global module" 来保存我的 Knockout 视图模型？

How can I define a Webpack "global module" to hold my Knockout viewmodel?

javascript

knockout.js

webpack

ecmascript-6

javascript-import

Put your variables in a module.

What is a webpack Module

Main.js

KoModule.js

HTML