Webpack ProvidePlugin глобальная переменная (не удается найти модуль)

Я довольно новичок в Webpack, но не могу понять, почему мой вызов ProvidePlugin работает не так, как ожидалось.

у меня есть следующий файл:

App.js

var App = function() {
    getSomething: function(size) {}
}();

module.exports = App;

Я хочу, чтобы эта переменная " App " была глобально доступна, потому что другие файлы используют ее следующим образом:

макет.js

var Layout = function () {
    App.getSomething('md');
}();

webpack.конфиг.js

в webpack.конфиг.js у меня есть следующая строка:

new webpack.ProvidePlugin({ App: 'app' })

это мой запись:

entry: {
    'app': './angularApp/metronicapp.ts',
}

metronicapp.ТС

import './metronic/global/scripts/app';

здесь app мой app.js которая отображается выше.

я получаю следующую ошибку в браузере: Cannot find module "app"

и когда я компилирую webpack в консоли: Module not found: Error: Can't resolve 'app'

Я не могу понять чего мне не хватает. Мое приложение.JS не в правильном формате? Почему это App по-прежнему недоступна во всем мире?

9
javascript typescript webpack

1 ответов

webpack.конфиг.js

ProvidePlugin нужен путь к вашему глобального модуля App.js.

const path = require('path');
...
plugins: [
  new webpack.ProvidePlugin({
    App: path.resolve(__dirname, './path_to_App.js')
  })
]

глобальные.д.ТС

для Typescript не жаловаться на неопределенные конструкции создать global.d.ts

declare var App: any;

metronicapp.ТС

нет необходимости импортировать ./metronic/global/scripts/app внутри metronicapp.ts, webpack разрешит App на строительство.

App.getSomething('foo');

макет.js

var Layout = function() {
  App.getSomething('md');
}();
3