javascript - typescript:使用 typescript 和 webpack 2 解析 typeahead.js

Question

我从 webpack 收到以下错误。

ERROR in ./wwwroot/js/admin/infrastructure/typeaheadComponent.ts Module not found: Error: Can't resolve 'typeahead' in ...

我安装了以下内容

npm install typeahead.js
npm install @types/typeahead

我的 typescript 如下，使用node模块解析。

import { module } from "angular";
import "typeahead";
// necessary to import typeahead into JQuery, as otherwise
// typeahead below is not defined.

class TypeAheadController {
    foo(e) {
       $(e).typeahead(...)
    }
}

这会生成如下 JavaScript:

"use strict";
var angular_1 = require("angular");
require("typeahead");
var TypeAheadController = (function () { ...

我的webpack.config.js如下:

module.exports = {
    context: __dirname,
    entry: [
        "./app.ts",
        "./tab.ts",
        "./client/clientService.ts",
        "./client/clientSearchComponent.ts",
        "./infrastructure/messageComponent.ts",
        "./infrastructure/typeaheadComponent.ts",
        "./url.ts"],
    output: {
        filename: "./wwwroot/js/admin/admin.js"
    },
    devtool: "source-map",
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
};

导入到 gulp 任务中。

如何指定 typeahead 位于 node_modules/typeahead.js/dist/typeahead.bundle.js

Answer 1

该模块名为 typeadhead.js，因此您还需要导入 typeahead.js，而不是 typeahead。

import "typeahead.js";

导入始终与您使用 npm 安装它的名称相同。它甚至没有什么特别的，它只是简单地查看node_modules并找到具有给定名称的目录。然后它会查找 package.json 并导入 main field 中指定的文件。 。另请参阅Node.js - Folders as Modules .

您可以使用 resolve.alias更改导入的名称，但在这种情况下并没有真正这样做的充分理由。