如何從AngularJs組件的控制器類中調用全局函數

Question

在app.module.js文件中，從外部庫導入JS文件

import 'assets/scripts/admin';

具有全局功能：

function anonymousAdmin() {
  "use strict";

  implementation();
}

現在在app.component.js文件中具有帶有函數調用的控制器：

export const AppComponent = {
  controller: class AppComponent {
    $onInit() {
      /* global anonymousAdmin */
      anonymousAdmin();
    }
  }
};

運行Webpack / Babel將所有文件（ES6）保存到一個文件（ES5）中。 不幸的是我在控制台中出錯：

ReferenceError: anonymousAdmin is not defined

有人知道如何在控制器中調用此函數嗎？

Answer 1

試試這個。 您需要為腳本添加別名。

import * as admin from 'assets/scripts/admin';

export const AppComponent = {
  controller: class AppComponent {
    $onInit() {
      /* global anonymousAdmin */
      admin.anonymousAdmin();
    }
  }
};

Answer 2

anonymousAdmin不是全局函數。 該文件作為ES模塊導入，並且ES模塊強制采用嚴格模式，以防止它們將變量泄漏到全局范圍。

應該明確定義為全局：

function anonymousAdmin() {...}

window.anonymousAdmin = anonymousAdmin;

如果該文件屬於無法直接編輯的第三方模塊，並且考慮到正在使用Webpack，則可以將后者配置為使用export loader公開文件ES module export中的變量，例如：

...
module: {
  rules: [
    {
      test: require.resolve('assets/scripts/admin'),
      use: 'exports-loader?anonymousAdmin'
    }
  ]
},
...

該函數將被導入，例如：

import { anonymousAdmin } from 'assets/scripts/admin';