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')
  })
]

全球数据

为了让Typescript不要抱怨未定义的构造，请创建 global.d.ts

declare var App: any;

机电设备

无需./metronic/global/scripts/app内部导入metronicapp.ts，webpack将App在构建时解析。

App.getSomething('foo');

Layout.js

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