webpack 2.2.1安排错误顺序/位置的依赖关系

我有一个打印文件.ts以下文件。
我使用的WebPack版本2.2.1webpack 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, 
    }

因为预输入定义是@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似乎包括和使用相关的要求（323），但它显然不工作，因为Bloodhound是未定义的。

在输出文件中，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

如何解决未定义的警犬？

来源

2017-04-03 Jim

这个包是一个古怪的。它被命名为typeahead.js，但在对的package.json进入"main"实际上出口的Bloodhound功能和重视的预输入功能jQuery.fn。更糟糕的是，其@types软件包的名称错误（缺少.js），并使用声明格式编写，希望您从"bloodhound"导入。这很痛苦，但可以解决。

下面是步骤，你需要采取：

与故宫安装typeahead.js（因为你正在使用的WebPack）
```
npm install --save typeahead.js 
```
安装@types包（注意没有.js，这很烦人）
```
npm install --save @types/typeahead 
```
删除不需要的别名。具体来说，以下行必须从webpack.config.js被删除：
```
typeahead: "typeahead.js" 
```
创建声明文件ambience.d.ts（名字不显著）
```
declare module "typeahead.js" { 
    export = Bloodhound; 
} 
```
不幸上面的代码是指全球Bloodhound，其中@types/typeahead无条件地声明。幸运的是，它在运行时不会是全局的。

调整你的代码，以便它大致如下

import { module } from "angular"; 
import Bloodhound = require("typeahead.js"); // note the `.js` 

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

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

来源

2017-04-21 06:21:35

webpack 2.2.1安排错误顺序/位置的依赖关系

回答

相关问题