นำเข้าไลบรารี Vanilla JavaScript ใน Angular 6

ฉันได้รับข้อผิดพลาดดังต่อไปนี้เมื่อพยายามนำเข้าห้องสมุด 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) {}
});

คำตอบ #1

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

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

แทนที่จะทำแบบนี้ คุณต้องส่งออกฟังก์ชันแบบนี้:

export function doJob(template, options) { }

คำตอบ #2

ไลบรารีที่มีอยู่น่าจะเป็นโมดูลประเภทใดประเภทหนึ่ง เพื่อให้ตัวรวมโมดูลของคุณสามารถเพิ่มมันเข้าไปในระบบโมดูลของคุณได้

สิ่งแรกที่ควรตรวจสอบคือว่าห้องสมุดที่มีอยู่มีแพ็กเกจ npm หรือไม่? ในกรณีนั้นคุณน่าจะควรใช้เวอร์ชัน NPM ของห้องสมุดที่มีอยู่ หรือพิจารณาอัปเกรดห้องสมุดที่มีอยู่ไปยังเวอร์ชันที่มาพร้อมกับระบบโมดูล

คุณอาจต้องการบางอย่างเช่น

export const ExistingLibrary = ...

หรือ

module.exports = ExistingLibrary =

หากไม่สามารถแก้ไขไลบรารีที่มีอยู่ได้ คุณจะต้องกำหนดค่าตัวรวบรวมโมดูลของคุณหรือกระบวนการสร้าง JS ให้จัดการกับไลบรารีที่ไม่รวมโมดูลและ/หรือต้องการ global this เช่น ใช้บางอย่างเช่น https://www.npmjs.com/package/webpack-raw-bundler