javascript - webpack 2.2.1 以错误的顺序/位置排列依赖项

Question

我有一个包含以下内容的 typescript .ts 文件。
我使用的是 webpack 版本 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)，但它显​​然不起作用，因为 Bloodhound 未定义。

在输出文件中，require 出现在定义 Controller 之前。

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

如何修复未定义的 Bloodhound？

Answer 1

这个包是一个古怪的包。它名为 typeahead.js，但 package.json 中的 "main" 条目实际上导出 Bloodhound 函数并将 typeahead 函数附加到 jQuery.fn。更糟糕的是，它的 @types 包的名称错误(缺少 .js)，并且使用声明格式编写，希望您从 “bloodhound”导入“。这很痛苦，但可以解决。

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

1. 使用 npm 安装 typeahead.js(因为您使用的是 Webpack)

   npm install --save typeahead.js
   

2. 安装@types包(注意没有.js，这很烦人)

   npm install --save @types/typeahead
   

3. 删除不需要的别名。具体来说，必须从 webpack.config.js 中删除以下行:

   typeahead: "typeahead.js"
   

4. 创建声明文件ambience.d.ts(名称不重要)

   declare module "typeahead.js" {
       export = Bloodhound;
   }
   

   不幸的是，上面的代码引用了@types/typeahead无条件声明的全局Bloodhound。幸运的是，它在运行时不会是全局的。

5. 调整您的代码，使其大致如下

   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
           });
       }
   }