javascript - Webpack ProvidePlugin 全局变量(找不到模块)

Question

我是 Webpack 的新手，但无法弄清楚为什么我的 ProvidePlugin 调用没有按预期工作。

我有以下文件:

应用程序.js

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

module.exports = App;

我希望这个“App”变量可以全局访问，因为其他文件是这样使用它的:

布局.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 时: 未找到模块:错误:无法解析“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，webpack 将在构建时解析 App。

App.getSomething('foo');

布局.js

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