在 Angular 6 中导入 Vanilla JavaScript 库

Question

尝试将现有的 Vanilla JavaScript 库导入 Angular 6 组件时出现以下错误。 请建议如何解决它。

导入库的语法，我写过

import * as ExistingLibrary from 'app/main/libs/ExistingLibrary.js';

 ExistingLibrary.doJob is not a function

外部 JavaScript 库 - ExistingLibrary.js

var ExistingLibrary = new (function () {
    this.doJob = doJob;
    function doJob(template, options) {

    function f1(template, options) {}
    function f2(template, options) {}
});

Answer 1

现有的库可能应该是一个简短的模块，以便您的模块捆绑器可以将它添加到您的模块系统中。

首先要查找的是现有库是否有 npm package？ 在这种情况下，您可能应该使用现有库的 NPM 版本，或者考虑将现有库升级到模块系统附带的版本。

你可能需要类似的东西

export const ExistingLibrary = ...

或者

module.exports = ExistingLibrary =

如果无法修改现有库，则必须配置模块捆绑器或 JS 构建管道以处理不包含模块和/或需要全局 this 的库。 例如使用类似https://www.npmjs.com/package/webpack-raw-bundler

Answer 2

var ExistingLibrary = new (function () {
    this.doJob = doJob;
    function doJob(template, options) {

    function f1(template, options) {}
    function f2(template, options) {}
});

而不是这个，你需要像这样导出函数：

export function doJob(template, options) { }