Получить функции класса из модуля webpack

#javascript #webpack #ecmascript-6

Вопрос:

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

Есть конфигурация webpack:

  entry: {
    main: ["./src/js/main.js"],
  },

  performance: {
    hints: false,
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist/js"),
  },
  optimization: optimization(),
  module: {
    rules: ifBabel(),
  },
 

В main.js у меня есть

 import { finishing } from "./modules/forms/finishing";

var fns = new finishing();
fns.init();
 

Мне нужно вызвать некоторую функцию fns из внешнего скрипта. Но webpack компилирует скрипт внутри своей функции, и я не могу получить к нему доступ..

Комментарии:

1. Мне нужно вызвать какую-то функцию fns из внешнего скрипта, тогда вам тоже придется import это сделать. Это предполагаемый способ работы модулей.

2. Какова логика, которая находится снаружи, и почему она находится снаружи, а не внутри пакета Webpack, как все остальное?

3. Фильтр написан в интерфейсе в webpuck, но скрипт, который вызывает этот фильтр в cms, мне нужно вызвать его из тела. <скрипт> тег<скрипт></скрипт>

Ответ №1:

У вас есть 2 основных варианта:

  • Используйте Webpack library , чтобы определить, как ваш пакет Webpack отображается на странице при загрузке, и чтобы ваши main.js функции экспорта использовались вашей страницей через библиотеку, например
     import { foo } from "./foo";
    export { foo };
     

    с помощью страницы, которую затем можно использовать LibraryName.foo()

  • Должны main.js явно сделать что-то вроде
     import { foo } from "./foo";
    window.foo = foo;
     

    чтобы вручную отобразить определенные функции в окне или в каком-либо другом месте.

Я бы рекомендовал первый подход, но любой из них подойдет.