Как определить "глобальный модуль" Webpack для хранения моей модели Knockout?

Question

Я работаю над переносом некоторого унаследованного кода в Webpack (чтобы помочь мне контролировать некоторую адскую зависимость, которая у меня есть. Пока все идет хорошо. Проблема связана с существующим использованием кодов Knockout. Мне нужен способ доступа к представлению модель в различных компонентах. Поэтому мне нужно что-то, чтобы держать эту модель представления. Этот вопрос, кажется, дает мне хорошее решение:

Поместите ваши переменные в модуль.

Webpack оценивает модули только один раз, поэтому ваш экземпляр остается глобальным и передает изменения от модуля к модулю. Поэтому, если вы создаете что-то вроде globals.js и экспортируете объект из всех ваших глобалов, то вы можете импортировать "./globals" и читать / записывать в эти глобалы.

Хотя я не могу понять, как это сделать. Я довольно новичок в вебпаке / import / export заявления, так что я не в курсе основ. Я хочу "Модуль". Отлично, что вебпак должен сказать по этому поводу:

Что такое модуль веб-пакета

В отличие от модулей Node.js, модули веб-пакетов могут выражать свои зависимости различными способами.

Какие? Неужели это так?! Так что я изо всех сил пытаюсь понять, что такое модуль и как мне его использовать?

До сих пор я определял экспортируемые функции и импортировал их (эти модули??!). Так что я бы сделал что-то вроде этого:

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 Это?

Я явно упускаю что-то фундаментальное здесь, но я не могу понять, что это такое.

Answer 1

Я выяснил решение. Не уверен, что это лучший способ сделать это. Но, читая документы MDN оexport Я видел:

// exports a function declared earlier
export { myFunction };

Это заставило меня задуматься. до сих пор я использую export default function myFunction(){ но, похоже, я могу экспортировать объекты, а не только функции (имеет смысл, поскольку функции являются объектами верхнего уровня в js...). Поэтому я изменил мою предыдущую попытку глобального модуля:

var myModuleHolder = function () {
    var viewModel = {}

    function setViewModel(vm) {
        viewModel = vm;
    }

    function getViewModel() {
        return viewModel;
    }

    return {
        setViewModel: setViewModel,
        getViewModel: getViewModel
    }
}

export default myModuleHolder();

Теперь я могу импортировать это и использовать его, и он сохранит мою viewmodel:

import moduleHolder from './ViewModelModule.js';

moduleHolder.setViewModel(result);

Мое понимание того, что модуль на самом деле; это объект exportиздано из библиотеки. Таким образом, модуль может быть функцией, классом, объектом Javascript ({}) результат функции и т. д. В основном любой объект в Javascript

Модули сохраняются в памяти и загружаются только один раз за жизненный цикл страницы, независимо от того, сколько раз они импортированы в другие сценарии.

Answer 2

Это как можно ближе к вам, не зная точно, как вы хотите использовать свои модели, а что нет. Это часто, как я использую 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>

Рабочий пример здесь