Question

我从webpack收到以下错误。

./wwwroot/js/admin/infrastructure/typeaheadComponent.ts中的错误找不到模块：错误：无法解决＆＃39; typeahead＆＃39;在......

我安装了以下

npm install typeahead.js
npm install @types/typeahead

我的打字稿如下，使用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来更改导入的名称，但在这种情况下，没有充分的理由这样做。

Answer 2

您可以使用别名来解决此问题。在webpack.config.js中更改内容的最小示例：

module.exports = {
  /* ... everything you currently have */
  resolve: {
    alias: {
      typeahead: 'typeahead.js'
    }
  }
}

Answer 3

我通过以下更改解决了这个问题。

您需要分别导入Bloodhound和Typeahead。为此，请编辑您的webpack.config.js

  resolve: {
    extensions: ['.js', '.ts'],
    alias: {
      typeahead: 'corejs-typeahead/dist/typeahead.jquery.min.js',
      bloodhound: 'corejs-typeahead/dist/bloodhound.min.js'
    }
  },

然后在您的.ts文件中：

import "typeahead";
import * as Bloodhound from "bloodhound";

typescript：使用typescript和webpack 2解析typeahead.js

3 个答案: