Webpack ProvidePleugin全局变量（找不到模块）

Question

我有以下文件：

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

module.exports = App;

我希望这个'app'变量是全局可访问的，因为其他文件是这样使用它的：

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

在webpack.config.js中，我有以下一行：

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

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

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

我想不出我错过了什么。我的app.js格式不正确吗？为什么app仍然不能全局使用？

Answer 1

ProvidePleugin需要全局模块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.ts中导入./metronic/global/scripts/app，webpack将在构建时解析app。

App.getSomething('foo');

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