Webpack 2：如何将包与不匹配的@types 匹配？答案

【问题标题】：Webpack 2: How to match package with mismatched @types?Webpack 2：如何将包与不匹配的@types 匹配？
【发布时间】：2017-08-03 16:38:11
【问题描述】：

我正在尝试使用 webpack 2 将 SoundJS（createJS 框架的一个模块）导入我的 typescript 项目。

在 vendor.ts 我有

import "soundjs";

以及其他几个工作导入

使用 npm 导入的 @types 定义名为“soundjs”，但 npm 包“soundjs”为空，所以我必须使用另一个名为“createjs-soundjs”的 npm 包，这会导致解析错误。

当我尝试使用 webpack 进行编译时，我收到错误“找不到模块：错误：无法解析 '[包含 vendor.ts 的文件夹的路径]'中的 'soundjs'”

如何修复 webpack 2 以使其解析为 createjs-soundjs 包？

提前感谢您的帮助:)

【问题讨论】：

标签： typescript npm typescript-typings webpack-2

【解决方案1】：

如何修复 webpack 2 以使其解析为 createjs-soundjs 包？

您不需要，因为createjs-soundjs 没有打包为模块。这是来自库的入口点soundjs-0.6.2.min.js。

this.createjs=this.createjs||{},function()...

这意味着该库将在浏览器上下文中全局可用。

您还可以从 @types/soundjs 定义中注意到这一点，其中所有内容都可以通过命名空间全局访问

declare namespace createjs {
    export class AbstractPlugin {
        create(src: string, startTime: number, duration: number): AbstractSoundInstance;
        getVolume(): number;
        isPreloadComplete(src: string): boolean;
        ...
    }
}

那么我们将如何将这个库与 TypeScript 一起使用？

import "createjs-soundjs";
console.log(createjs.RequestUtils.isImageTag("foo")); // false

如果 @types/soundjs 已安装并包含在项目中，您应该获得上下文感知（例如代码完成）。

【讨论】：

对我遇到的问题没有真正的帮助，但我很感激花时间来创建详细的回复，让你赢了 :) 谢谢！

【解决方案2】：

“未找到模块：错误：无法解析 '[包含 vendor.ts 的文件夹的路径]'中的 'soundjs'

您应该将soundjs 更改为实际存在的包：createjs-soundjs，然后始终使用此名称。

【讨论】：

包的名称由 npm 定义，并在 node_modules 文件夹中自动创建。类型是@types/soundjs，包是createjs-soundjs。如果我按照你说的做，使用 npm 进行包管理将不再起作用。肯定有一种方法可以在不重命名 npm 包的情况下工作？
由于 node_modules 包通常是 .gitignore'd，所以这样做也不会反映在其他任何人的机器上