从 Typescripts 中的 js 文件导入 var

Question

对于上下文（虽然它不是那么重要），我正在尝试将 SVGMorpheus 导入 typescript 项目 (Angular 2)。

SVGMorpheus 只是一个全局的。声明如下：

var SVGMorpheus = (function(){....code...})())

即标准老派 javascript IIFE 分配给全局。在我的项目中，我试图这样导入它：

import * as SVGMorpheus from "./path/to/svg-morpheus"

这工作正常并且没有错误，但是 SVGMorpheus 只是一个空对象。

console.log(SVGMorpheus); //Outputs "{}".

任何尝试使用它都会导致错误。

有谁知道我做错了什么？我还添加了一个没有帮助的 typings.d.ts 文件。 SVGMorpheus 不支持打字或任何类型的 UMD 形式。

Answer 1

这不是 Typesciprt 的特殊问题，而是在所有文件 imported/exported 的情况下都可能发生的一般问题。答案是并非所有 javascript 文件都可以导出。特别是，在这种情况下，答案是 "No"。我将假设您正在使用 Webpack，如果您不这样做，我强烈建议您最终使用 Webpack。

从Webpack大佬(https://github.com/webpack/docs/wiki/shimming-modules)写的官方文档来看，有办法解决这种情况，文件不支持import/export.[=12的现代技术=]

您需要 "exports-loader" 让您的 IIFE 全局模块准备好导出到其他脚本。

var SVGMorpheus = require('./path/to/svg-morpheus'); // Wrong
var SVGMorpheus = require('exports-loader?SVGMorpheus!./path/to/svg-morpheus'); // Good

希望这能回答您的问题。谢谢

Answer 2

这是一个 angular-cli 问题。我没有在编译器中注册脚本。将 node_module 添加到 angular-cli.json 文件内应用程序对象的脚本数组中就可以了：

{
   ...
   "apps": [
      ...app definition stuff...
      "scripts": [
          "path/to/external/module"
      ]   
   ]
}

请注意，这应该适用于任何外部 IIFE 类型的导入。不需要其他代码更新（原始 post 代码有效）。

从 Typescripts 中的 js 文件导入 var

Import var from js file in Typescripts

typescript

typescript-typings

typescript2.0