在 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) { }