在Angular 6中导入Vanilla JavaScript库

问题描述 投票:1回答:2

当我试图将现有的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) {}
});
javascript angular typescript
2个回答
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) { }

2
投票

现有的库可能应该是一个短的模块,这样你的模块捆绑器就可以把它添加到你的模块系统中。

首先要查找的是现有库是否有npm包,如果有的话,你可能应该使用现有库的NPM版本,或者考虑将现有库升级到一个自带模块系统的版本。

你可能需要这样的东西

export const ExistingLibrary = ...

module.exports = ExistingLibrary =

如果修改现有的库是不可能的,你将不得不配置你的模块捆绑器或JS构建管道来处理不包含模块或需要全局this的库。例如,使用类似 https:/www.npmjs.compackagewebpack-raw-bundler

© www.soinside.com 2019 - 2024. All rights reserved.