جافاسكريبت - متغير عام لـ Webpack ProvidePlugin (لا يمكن العثور على الوحدة)

أنا جديد نسبياً على Webpack، لكن لا أستطيع فهم لماذا استدعاء ProvidePlugin الخاص بي لا يعمل كما هو متوقع.

لدي الملف التالي:

App.js

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

module.exports = App;

أريد أن يكون هذا المتغير 'App' متاحًا على مستوى عالمي لأن الملفات الأخرى تستخدمه بهذه الطريقة:

Layout.js

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

webpack.config.js

في ملف webpack.config.js لدي السطر التالي:

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

هذا هو مدخلي:

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

metronicapp.ts

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

حيث أن app هو app.js الخاص بي الموضح أعلاه.

أتلقى الخطأ التالي في المتصفح: لا يمكن العثور على الوحدة "app"

وعندما أقوم بتجميع webpack في وحدة التحكم: Module not found: Error: Can't resolve 'app'

لا أستطيع معرفة ما الذي أفتقده. هل ملف app.js الخاص بي ليس بالتنسيق الصحيح؟ لماذا لا يزال App غير متاح عالميًا؟

الإجابة رقم 1

webpack.config.js

يحتاج ProvidePlugin إلى مسار الوحدة العالمية الخاصة بك App.js.

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

global.d.ts

لكي لا يشتكي Typescript من البُنى غير المحددة، أنشئ global.d.ts

declare var App: any;

metronicapp.ts

لا حاجة لاستيراد ./metronic/global/scripts/app داخل metronicapp.ts، سيقوم webpack بحل App عند البناء.

App.getSomething('foo');

Layout.js

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