javascript - 使用 Jekyll、react 和 webpack 实例化对象的问题

Question

我正在使用 Searchkit 节点模块从 Jekyll 项目中的 elasticsearch 检索数据。为此，我使用 webpack 并按照 that tutorial 中的建议使用react.

我在实例化 Searchkit 对象时遇到问题。

当我使用 webpack 然后使用 Jekyll 构建我的项目时，我没有收到任何错误。

但是我尝试注入(inject)的组件没有出现在网站上，我在 google chrome 控制台中收到此错误:

Search.js:41 Uncaught TypeError: Cannot read property 'SearchkitManager' of undefined
    at eval (Search.js:41)
    at Object../webpack/components/Search.js (bundle.js:6933)
    at __webpack_require__ (bundle.js:20)
    at eval (entry.js:9)
    at Object../webpack/entry.js (bundle.js:6945)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:84
    at bundle.js:87

Search.js:41

var sk = new _searchkit2.default.SearchkitManager('http://demo.searchkit.co/api/movies/');

我尝试在控制台中实例化它，但没有出现任何错误。

我认为这是配置问题，但我不熟悉这些技术。

有人知道如何解决这个问题吗？

package.json :

{
  "name": "proto_doc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.4.1",
    "react-addons-update": "^15.6.2",
    "react-dom": "^16.4.1",
    "searchkit": "^2.3.0",
    "serviceworker-webpack-plugin": "^1.0.0-alpha02",
    "webpack": "^4.0.0-beta.3",
    "webpack-cli": "0.0.8-development",
    "webpack-dashboard": "^2.0.0",
    "webpack-dev-server": "^3.1.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx webpack-cli --mode development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pbelabbes/proto_doc.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/pbelabbes/proto_doc/issues"
  },
  "homepage": "https://github.com/pbelabbes/proto_doc#readme"
}

webpack.config.js

const webpack = require("webpack");
const path = require("path");

let config = {
  entry: "./webpack/entry.js",
  output: {
    path: path.resolve(__dirname, "./assets/javascripts/"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ['react', 'es2015']
       }
    }],
  },
  mode: "development"
}

module.exports = config;

entry.js

// Dependencies.
import React from 'react';
import {render} from 'react-dom';

// Custom components.
import Search from './components/Search';

// Mount apps to DOM.
render(<Search /> ,  document.getElementById('react-search'));

Search.js

// 1. Import Dependencies. =====================================================
import React, {Component} from 'react';
import Searchkit,{
    SearchBox,
    RefinementListFilter,
    Hits,
    HitsStats,
    SearchkitComponent,
    SelectedFilters,
    MenuFilter,
    HierarchicalMenuFilter,
    Pagination,
    ResetFilters
    } from "searchkit";
import * as _ from "lodash";

// custom to my project: generate random example searchbox placeholder.
// import SearchQuotes from './SearchQuotes';
// var randomQuote = SearchQuotes[Math.floor(Math.random() * SearchQuotes.length)];

// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
// const sk = new Searchkit.SearchkitManager(ELASTICSEARCH_URL, {});
const sk = new Searchkit.SearchkitManager('http://demo.searchkit.co/api/movies/');

// Custom hitItem display HTML.
const HitItem = (props) => (
  <div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
    <a href={ `https://omc.github.io/jekyll-elasticsearch-boilerplate${props.result._source.url}` }>
      <div className={props.bemBlocks.item("title")} 
        dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.title",false) || props.result._source.title}}></div>
    </a>
    <div>
      <small className={props.bemBlocks.item("hightlights")}
        dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.text",'')}}></small>
    </div>
  </div>
)

// 3. Search UI. ===============================================================
class Search extends Component {
  render(){
    const SearchkitProvider = Searchkit.SearchkitProvider;
    const Searchbox = Searchkit.SearchBox;
    var queryOpts = {
      analyzer:"standard"
    }
    return (
      <SearchkitProvider searchkit={sk}>
        <div className="search">
          <div className="search__query">
            {/* search input box */}
            <Searchbox searchOnChange={true}
              autoFocus={true}
              queryOptions={queryOpts}
              translations={{"searchbox.placeholder":"ex: bcd configuration", "NoHits.DidYouMean":"Search for {suggestion}."}}
              queryFields={["text", "title"]}/>
          </div>
          <div className="_Search_display_wrapper">
            <div className="_Search_facets">
              {/* search faceting */}
              <RefinementListFilter
                id="categories"
                title="Category"
                field="categories"
                operator="AND"/>
            </div>
            <div className="search__results">
              {/* search results */}
              <Hits hitsPerPage={50}
                highlightFields={["title", "text"]}
                itemComponent={HitItem}/>
              {/* if there are no results */}
              <NoHits className="sk-hits" translations={{
                "NoHits.NoResultsFound":"No results were found for {query}",
                "NoHits.DidYouMean":"Search for {suggestion}"
                }} suggestionsField="text"/>
            </div>
          </div>
        </div>
      </SearchkitProvider>
    )
  }
}
export default Search;

控制台中提到的Babel生成的Search.js

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");

var _react2 = _interopRequireDefault(_react);

var _searchkit = __webpack_require__(/*! searchkit */ "./node_modules/searchkit/lib/index.js");

var _searchkit2 = _interopRequireDefault(_searchkit);

var _lodash = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");

var _ = _interopRequireWildcard(_lodash);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // 1. Import Dependencies. =====================================================


// custom to my project: generate random example searchbox placeholder.
// import SearchQuotes from './SearchQuotes';
// var randomQuote = SearchQuotes[Math.floor(Math.random() * SearchQuotes.length)];

// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
var ELASTICSEARCH_URL = 'https://doc-bonita-test-4287920661.us-west-2.bonsaisearch.net/bonita_doc';
console.log(ELASTICSEARCH_URL);
// const sk = new Searchkit.SearchkitManager(ELASTICSEARCH_URL, {});
var sk = new _searchkit2.default.SearchkitManager('http://demo.searchkit.co/api/movies/');

// Custom hitItem display HTML.
var HitItem = function HitItem(props) {
  return _react2.default.createElement(
    "div",
    { className: props.bemBlocks.item().mix(props.bemBlocks.container("item")) },
    _react2.default.createElement(
      "a",
      { href: "https://omc.github.io/jekyll-elasticsearch-boilerplate" + props.result._source.url },
      _react2.default.createElement("div", { className: props.bemBlocks.item("title"),
        dangerouslySetInnerHTML: { __html: _.get(props.result, "highlight.title", false) || props.result._source.title } })
    ),
    _react2.default.createElement(
      "div",
      null,
      _react2.default.createElement("small", { className: props.bemBlocks.item("hightlights"),
        dangerouslySetInnerHTML: { __html: _.get(props.result, "highlight.text", '') } })
    )
  );
};

// 3. Search UI. ===============================================================

var Search = function (_Component) {
  _inherits(Search, _Component);

  function Search() {
    _classCallCheck(this, Search);

    return _possibleConstructorReturn(this, (Search.__proto__ || Object.getPrototypeOf(Search)).apply(this, arguments));
  }

  _createClass(Search, [{
    key: "render",
    value: function render() {
      var SearchkitProvider = _searchkit2.default.SearchkitProvider;
      var Searchbox = _searchkit2.default.SearchBox;
      var queryOpts = {
        analyzer: "standard"
      };
      return _react2.default.createElement(
        SearchkitProvider,
        { searchkit: sk },
        _react2.default.createElement(
          "div",
          { className: "search" },
          _react2.default.createElement(
            "div",
            { className: "search__query" },
            _react2.default.createElement(Searchbox, { searchOnChange: true,
              autoFocus: true,
              queryOptions: queryOpts,
              translations: { "searchbox.placeholder": "ex: bcd configuration", "NoHits.DidYouMean": "Search for {suggestion}." },
              queryFields: ["text", "title"] })
          ),
          _react2.default.createElement(
            "div",
            { className: "_Search_display_wrapper" },
            _react2.default.createElement(
              "div",
              { className: "_Search_facets" },
              _react2.default.createElement(_searchkit.RefinementListFilter, {
                id: "categories",
                title: "Category",
                field: "categories",
                operator: "AND" })
            ),
            _react2.default.createElement(
              "div",
              { className: "search__results" },
              _react2.default.createElement(_searchkit.Hits, { hitsPerPage: 50,
                highlightFields: ["title", "text"],
                itemComponent: HitItem }),
              _react2.default.createElement(NoHits, { className: "sk-hits", translations: {
                  "NoHits.NoResultsFound": "No results were found for {query}",
                  "NoHits.DidYouMean": "Search for {suggestion}"
                }, suggestionsField: "text" })
            )
          )
        )
      );
    }
  }]);

  return Search;
}(_react.Component);

exports.default = Search;

Answer 1

事实上，这就是我导入 Searchkit 模块包的方式。因此，我删除了所有 Searchkit. 并在导入中添加了 SearchkitManager、SearchkitProvider、Searchbox 和 NoHits。

所以现在，我有

// 1. Import Dependencies. =====================================================
import React, {Component} from 'react';
import {
    SearchBox,
    RefinementListFilter,
    Hits,
    HitsStats,
    SearchkitComponent,
    SelectedFilters,
    MenuFilter,
    HierarchicalMenuFilter,
    Pagination,
    ResetFilters,
    SearchkitManager,
    SearchkitProvider,
    NoHits
    } from "searchkit";

import * as _ from "lodash";


// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
const ELASTICSEARCH_URL = 'http://demo.searchkit.co/api/movies/';
const sk = new SearchkitManager(ELASTICSEARCH_URL, {});
console.log(sk);
// Custom hitItem display HTML.
const HitItem = (props) => (
  <div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
    <a href={ `https://omc.github.io/jekyll-elasticsearch-boilerplate${props.result._source.url}` }>
      <div className={props.bemBlocks.item("title")} 
        dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.title",false) || props.result._source.title}}></div>
    </a>
    <div>
      <small className={props.bemBlocks.item("hightlights")}
        dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.text",'')}}></small>
    </div>
  </div>
)

// 3. Search UI. ===============================================================
class Search extends Component {
  render(){
    const SearchkitProvider = SearchkitProvider;
    const Searchbox = SearchBox;
    var queryOpts = {
      analyzer:"standard"
    }
    return (
      <SearchkitProvider searchkit={sk}>
        <div className="search">
          <div className="search__query">
            {/* search input box */}
            <Searchbox searchOnChange={true}
              autoFocus={true}
              queryOptions={queryOpts}
              translations={{"searchbox.placeholder":"pof", "NoHits.DidYouMean":"Search for {suggestion}."}}
              queryFields={["text", "title"]}/>
          </div>
          <div className="_Search_display_wrapper">
            <div className="_Search_facets">
              {/* search faceting */}
              <RefinementListFilter
                id="categories"
                title="Category"
                field="categories"
                operator="AND"/>
            </div>
            <div className="search__results">
              {/* search results */}
              {/* <Hits hitsPerPage={50}
                highlightFields={["title", "text"]}
                itemComponent={HitItem}/> */}
              {/* if there are no results */}
              <NoHits className="sk-hits" translations={{
                "NoHits.NoResultsFound":"No results were found for {query}",
                "NoHits.DidYouMean":"Search for {suggestion}"
                }} suggestionsField="text"/>
            </div>
          </div>
        </div>
      </SearchkitProvider>
    )
  }
}
export default Search;

我仍然有问题，但与 SearchkitProvider 无关。我在做。