Javascript 网页2.2.1按错误顺序/位置排列依赖项

我有一个typescript

.ts

文件，其中包含以下内容。
我正在使用网页包版本

2.2.1

import { module } from "angular";
import "typeahead";

class TypeAheadController {
    static $inject = ["$log", "$timeout", "$http", "$interpolate"];
    constructor(
        public $log: ng.ILogService,
        public $timeout: ng.ITimeoutService,
        public $http: ng.IHttpService,
        public $interpolate: ng.IInterpolateService) {

        // do stuff with Typeahead / Bloodhound.
        var bloodhoundSuggestions = new Bloodhound({
            datumTokenizer: _ => Bloodhound.tokenizers.obj.whitespace(_[this.inputValue]),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
    }

因为typeahead定义在

@types/typeahead

中，实现在

typeahead.js

中，所以有必要在

webpack.config.js

globule = require("globule");

var configuration = {
    context: __dirname,
    resolve:
    {
        alias: {
            typeahead: "typeahead.js"
        }
    },
    entry: [
        ...globule.find("client/*.ts", { srcBase: "wwwroot/js/admin" })
    ],
    output: {
        filename: "./wwwroot/js/admin/admin.js"
    },
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
};

console.log(configuration);
module.exports = configuration;

不幸的是，在生成的javascript文件中，

Bloodhound

未定义

Webpack似乎包含并使用了相关的require（323），但它显然不起作用，因为

猎犬

未定义

在输出文件中，require正好在定义控制器之前出现

Object.defineProperty(exports, "__esModule", { value: true });    
var angular_1 = __webpack_require__(16);    
__webpack_require__(323);    
/**    
 * initialise and use a type ahead to find suggestions.    
 */    
var TypeAheadController = (function () {

在文件的更深处，我找到了323

/***/ }),
/* 323 */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(setImmediate) {var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 * typeahead.js 0.11.1
 * https://github.com/twitter/typeahead.js

---

如何修复未定义的猎犬？

此软件包很古怪。它被命名为typeahead.js，但package.json中的

“main”

条目实际上导出了

Bloodhound

函数，并将typeahead函数附加到

jQuery.fn

。更糟糕的是，它的

@types

包的名称错误（缺少

.js

），并且是使用声明格式编写的，该声明格式希望您从

导入“猎犬”

。这很痛苦，但可以解决

以下是您需要采取的步骤：

使用npm安装typeahead.js（因为您正在使用Webpack）

安装

@types

软件包（注意：没有

.js

，这很烦人）

删除不需要的别名。具体而言，必须从webpack.config.js中删除以下行：

typeahead: "typeahead.js"

创建声明文件ambience.d.ts（名称不重要）

不幸的是，上面的代码指的是全局的

猎犬
，
@types/typeahead
无条件声明。幸运的是，它在运行时不是全局的

调整代码，使其大致如下

import angular from "angular";
import Bloodhound from "typeahead.js"; // note the `.js`

class TypeAheadController {
    static $inject = ["$log", "$timeout", "$http", "$interpolate"];
    constructor(
        readonly $log: angular.ILogService,
        readonly $timeout: angular.ITimeoutService,
        readonly $http: angular.IHttpService,
        readonly $interpolate: angular.IInterpolateService) {

        // do stuff with Typeahead / Bloodhound.
        const bloodhoundSuggestions = new Bloodhound({
            datumTokenizer: _ => Bloodhound.tokenizers.obj
                .whitespace(_[this.inputValue]),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });
    }
}

---

这个包裹很奇怪。它被命名为typeahead.js，但package.json中的

“main”

条目实际上导出了

Bloodhound

函数，并将typeahead函数附加到

jQuery.fn

。更糟糕的是，它的

@types

包的名称错误（缺少

.js

），并且是使用声明格式编写的，该声明格式希望您从

导入“猎犬”

。这很痛苦，但可以解决

以下是您需要采取的步骤：

使用npm安装typeahead.js（因为您正在使用Webpack）

安装

@types

软件包（注意：没有

.js

，这很烦人）

删除不需要的别名。具体而言，必须从webpack.config.js中删除以下行：

typeahead: "typeahead.js"

创建声明文件ambience.d.ts（名称不重要）

不幸的是，上面的代码指的是全局的

猎犬
，
@types/typeahead
无条件声明。幸运的是，它在运行时不是全局的

调整代码，使其大致如下

import angular from "angular";
import Bloodhound from "typeahead.js"; // note the `.js`

class TypeAheadController {
    static $inject = ["$log", "$timeout", "$http", "$interpolate"];
    constructor(
        readonly $log: angular.ILogService,
        readonly $timeout: angular.ITimeoutService,
        readonly $http: angular.IHttpService,
        readonly $interpolate: angular.IInterpolateService) {

        // do stuff with Typeahead / Bloodhound.
        const bloodhoundSuggestions = new Bloodhound({
            datumTokenizer: _ => Bloodhound.tokenizers.obj
                .whitespace(_[this.inputValue]),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });
    }
}

import angular from "angular";
import Bloodhound from "typeahead.js"; // note the `.js`

class TypeAheadController {
    static $inject = ["$log", "$timeout", "$http", "$interpolate"];
    constructor(
        readonly $log: angular.ILogService,
        readonly $timeout: angular.ITimeoutService,
        readonly $http: angular.IHttpService,
        readonly $interpolate: angular.IInterpolateService) {

        // do stuff with Typeahead / Bloodhound.
        const bloodhoundSuggestions = new Bloodhound({
            datumTokenizer: _ => Bloodhound.tokenizers.obj
                .whitespace(_[this.inputValue]),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });
    }
}