webpack build oidc-client 结果 Oidc.Usermanager is not a constructor

Question

我有一个 angularjs 应用程序，我在其中运行 oidc-client。当我从 Visual Studio 启动我的 angularjs 应用程序时。我对 oidc-client 没有任何问题。一切正常。但是当我使用 Webpack 捆绑它时，它给了我一个奇怪的错误，说 Oidc.Usermanager 不是构造函数...

我是运行 angularjs/angular .net 核心上的混合 angularjs/angular 应用程序。我这样使用 WebpackDevMiddleware

    app.UseWebpackDevMiddleware(new 
   Microsoft.AspNetCore.SpaServices.Webpack.WebpackDevMiddlewareOptions()
        {
            HotModuleReplacement = true,
            ConfigFile = Path.Combine(env.ContentRootPath, 
   @"ClientApp\src\webpack.config.js"),
            ProjectPath = Path.Combine(env.ContentRootPath, @"ClientApp\")
        });

我有以下 oidc 客户端的 webpack 配置。我用的是1.9.0

版本

plugins: [
new HtmlWebpackPlugin({
  template: './config/index.html'
}),
// new webpack.ProvidePlugin({
//   foundation: 'foundation-sites/js/foundation/foundation'
// }),
new webpack.ProvidePlugin({
  $: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
  jQuery: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
  "window.jQuery": path.resolve(__dirname, './app-old/scripts/jquery- 
2.1.4.js')
}),
new webpack.ProvidePlugin({
  Oidc: path.resolve('./src/app-old/scripts/oidc-client.js'),
  "window.Oidc": path.resolve('./src/app-old/scripts/oidc-client.js')
}),
new webpack.ProvidePlugin({
  toastr: 'toastr',
  "window.toastr": "toastr"
})

这是给出错误的 oidc-client 代码

  var config = {
        authority: "http://localhost:52606/",
        client_id: "js",
        redirect_uri: "https://localhost:5001/#/",
        response_type: "code",
        scope: "openid profile",
        post_logout_redirect_uri: "https://localhost:5001/",
        automaticSilentRenew: true,
        loadUserInfo: true
    };

    var mgr = new Oidc.UserManager(config);

这是我得到的错误

  TypeError: Oidc.UserManager is not a constructor
at Object.eval (authService.js:42)
at Object.invoke (angular.js:4762)
at Object.enforcedReturnValue [as $get] (angular.js:4600)
at Object.invoke (angular.js:4762)
at eval (angular.js:4560)
at getService (angular.js:4707)
at injectionArgs (angular.js:4732)
at Object.invoke (angular.js:4754)
at Object.enforcedReturnValue [as $get] (angular.js:4600)
at Object.invoke (angular.js:4762)

没有 webpack 一切都很好。我错过了什么？

Answer 1

好的..这是我发现的。目前我使用的是 1.9.0 版本。当我使用节点模块的 1.9.0 版时，oidc-client 文件以：

开头

var Oidc =
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/

但是当我转到 GitHub 并下载最新文件 https://github.com/IdentityModel/oidc-client-js/tree/dev/lib 时。它的从以下代码开始。这段代码也适用于 webpack。两者都是1.9.0版本。 :-S

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

webpack build oidc-client 结果 Oidc.Usermanager is not a constructor

webpack build oidc-client results in Oidc.Usermanager is not a constructor

javascript

angularjs

webpack

asp.net-core

oidc-client-js