如何在打字稿中导入js文件作为模块

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在打字稿中导入js文件作为模块相关的知识,希望对你有一定的参考价值。

我正在使用SharePoint中的SPFx框架,它将具有打字稿文件。我在我的应用程序中使用SPServices.js和app.js(自定义js文件)。在config.json文件中我使用如下:

"externals": {
    "jQuery":{
      "path":"node_modules/jquery/dist/jquery.min.js",
      "globalName": "jQuery1"
    },
    "AppScript":{
      "path":"/src/webparts/calendarEvents/app.js",
      "globalName": "AppScript",
      "globalDependencies": [
        "jQuery",
        "SPServices"      
      ]
    },
    "SPServices": {  
      "path": "/src/webparts/calendarEvents/jquery.SPServices.min.js",  
      "globalName": "SPServices" ,
      "globalDependencies": [
        "jQuery"
      ] 
    }
}

如果我使用下面的语法,它在我的.ts文件中工作

require('SPServices')
require('AppScript')

但是,我想将它们作为对象导入而不是上面的语法,以便我可以访问这些文件中的函数。为了做到这一点,我正在使用as

import * as SPServices from 'SPServices';
import * as myScript from 'AppScript';

但这些都行不通。它给出了错误。

Resource "SPServices" not found in loader configuration of manifest for component "b052328a-ad75-4056-af7f-7bc8b3e795fc" (CalendarEventsWebPart)

但奇怪的是,同一行import * as SPServices from 'SPServices';在另一个.ts文件中正常工作。它没有给出任何这样的错误。我真的很困惑这里错了。

为js,css文件等类型文件添加文件时为什么会有太多混淆?

答案

SPServices是在CommonJS模块用于导入功能之前编写的。它通过扩展jQuery来工作。试试这个:

import * as jQuery from 'jQuery';
require('SPServices');

$().SPServices.doStuff();

有关此用例的更多信息,请参阅Microsoft文档部分Loading a library that has a dependency on another library

以上是关于如何在打字稿中导入js文件作为模块的主要内容,如果未能解决你的问题,请参考以下文章

在打字稿Angular 5中导入json文件

json 尝试在打字稿中导入外部模块

打字稿导入模块作为变量不起作用

打字稿,如何使用类作为参数的类型

无法在打字稿中导入 svg 文件

如何在打字稿monorepo中导入本地包