如何定义Webpack“全局模块”？持有我的Knockout视图模型？ [英] How can I define a Webpack "global module" to hold my Knockout viewmodel?

问题描述

我正在努力将一些遗留代码移到Webpack中（以帮助我控制一些我所拥有的依赖性。到目前为止一切顺利。问题来自Knockout的现有代码使用。我需要一种方法来在各种组件中访问视图模型。所以我需要一些东西来保存这个视图模型。这个问题似乎为我提供了一个很好的解决方案：

I'm working on moving some legacy code into Webpack (to help me control some dependancy hell that I'm having. All's going well so far. The issue comes from the existing codes use of Knockout. I need a way to access the view model in various components. So I need something to hold this view model. This question seems to provide me a good solution:

将变量放入模块中。

Webpack仅评估模块一次，所以你的实例保持全局
并且从模块到模块进行更改。所以如果你创建
类似于globals.js并导出所有全局变量
的对象，那么你可以导入'./globals'和读/写这些全局变量。

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 语句很新，所以我不是最新的基本面。我想要一个模块。伟大的webpack对此有何评价：

I can't really figure out how to do this though. I'm pretty new to webpack/import/export statements so I'm not up to date on the fundamentals. I want a "Module". Great what does webpack have to say on this:

什么是webpack模块

与Node.js模块相比，webpack模块可以通过多种方式表达他们的
依赖关系

What is a webpack Module

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

什么？真的，就是这样吗？！所以我很难接受一个模块是什么以及我应该如何使用它？

What? Really, that's it?! So I'm struggling to come to terms with what a module is and how I should use one?

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

Up till now I've defined exported functions and imported them (are these modules??!). So I would do something like this:

export default function koModule(){
  var viewModel = {}

  function setViewModel(vm){
      viewModel = vm;
  }

  function getViewModel(){
     return viewModel;
  }

  return {
     setViewModel:setViewModel,
     getViewModel : getViewModel
  }
}

我想我可以在创建初始视图模型时使用它：

I'm think I can then kinda use this when I create my initial viewmodel:

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
myKoModule.setViewModel(vm);
...

但这显然是错误的作为 myKoModule 将在每次调用函数时被实例化...并且任何尝试读取它的模块只会得到一个空白对象：

But that's obviously wrong as the myKoModule will be instantiated every time I call the function... and any module trying to do read it is just going to get a blank object:

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
var vm = myKoModule.getViewModel();
//vm is undefined...

在上一个问题中，它指出 Webpack仅评估模块一次。所以我显然错过了一个模块是什么以及我应该如何使用它们。

In the previous question it states "Webpack evaluates modules only once". So I'm obviously missing what a module is and how I should be using them then.

所以根据我的要求，有人可以提供一个工作的例子Webpack模块及其用于保存，读取和写入全局变量，同时仍允许我导入它？

So given my requirements, can someone provide an example of a working Webpack "Module" and it's usage in holding,reading and writing a global variable while still allowing me to import it?

我显然缺少一些基本的东西，但我无法弄清楚它是什么。

I'm obviously missing something fundamental here but I can't really figure out what it is.

推荐答案

在我不知道你想要如何使用你的模型的情况下，我可以为你获得这么近。这通常是我在webpack中使用viewModels的方式，它们本质上只是带有内置方法的构造函数，我可以在需要时调用它们。

This is about as close I can get for you without knowing exactly how you want to use your models and what not. This is often how I use viewModels in webpack, they are essentially just constructor functions with built in methods that I can call on when needed.

import ko from 'knockout'
import koModule from './koModule.js'

const model = new koModule('Budhead2004 was here', 'More Stuff here');
ko.applyBindings(model);

KoModule.js

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

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>

这里的工作示例

这篇关于如何定义Webpack“全局模块”？持有我的Knockout视图模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！