Webpack ProvidePlugin全局變量（找不到模塊）

Question

我對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

我在瀏覽器中收到以下錯誤： Cannot find module "app"

當我在控制台中編譯webpack時： Module not found: Error: Can't resolve 'app'

我無法想象我錯過了什么。 我的app.js格式不正確嗎？ 為什么App還沒有全球可用？

Answer 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

無需在metronicapp.ts導入./metronic/global/scripts/app將在構建時解析App 。

App.getSomething('foo');

Layout.js

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