加载npm typeahead.js时如何引用typeahead和bloodhound

Question

我用npm安装了typeahead.js.从我读到的这包括先行和猎犬.

然后我在我的模块中要求jquery后需要它.

但现在我打电话的时候

new Bloodhound()

Bloodhound(可以理解)未定义.

我只能在html的脚本文件中找到包括bloodhound.js和typeahead.js在内的例子.

如何通过要求从npm完成？

以防万一:这是我的完整模块:

/**获取所有对象*构建过滤器组件所需的对象数组,以创建可过滤对象列表*返回过滤器组件*/'use strict'

import $ from 'jquery'
import React from 'react'
import 'typeahead.js'

export default React.createClass({
  displayName: 'Filter',

  propTypes: {
    data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
  },

  componentDidMount () {
    const objects = this.props.data
      .map(function (object) {
        // make sure every fauna has a name
        // dont use others for filtering
        if (object.Taxonomie && object.Taxonomie.Eigenschaften && object.Taxonomie.Eigenschaften['Artname vollständig']) {
          return {
            id: object._id,
            label: object.Taxonomie.Eigenschaften['Artname vollständig']
          }
        }
      })
    const fauna = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace('label'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: objects
      })
    $('#bloodhound .typeahead').typeahead({
      minLength: 3,
      highlight: true
    },
    {
      name: 'fauna',
      valueKey: 'label',
      limit: 20,
      source: fauna
    })
  },

  render () {
    return (
      <div id='bloodhound'>
        <input className='typeahead' type='text' placeholder='filtern'/>
      </div>
    )
  }
})

Answer 1

该文件typeahead.bundle.js应该同时提供Typeahead和Bloodhound,但是当你通过Node加载时它似乎没有像你提到的那样提供对Bloodhound的访问.

解决方法是单独导入Typeahead和Bloodhound(相同的NPM包):

require("typeahead.js/dist/typeahead.jquery.min.js")
Bloodhound = require("typeahead.js/dist/bloodhound.min.js")