Question

在app.module.js文件中，从外部lib

导入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，则后者可以配置为使用exports loader从文件ES模块导出中公开变量，如下所示：

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

该功能正在导入，如：

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

如何从AngularJs组件中的控制器类调用全局函数

2 个答案: