【问题标题】:How to include external javascript library in PreactJS?如何在 PreactJS 中包含外部 JavaScript 库?
【发布时间】:2017-08-16 08:35:27
【问题描述】:

我目前是一个基于 preactJS 和 algolia 的小项目?我发现 reactjs 有 algolia 组件,但不幸的是,preactjs 没有 algolia 组件。这就是为什么我的问题是如何将 algolia javascript 文件包含到 preactjs 中?

<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>

【问题讨论】:

  • 另外,我不知道你是否看到它,但我们有另一种 InstantSearch,React-InstantSearch,它可能会更好地与你的 preact 应用程序集成。不要犹豫,向我们提供您的反馈。
  • @Marie 我已经尝试使用React-InstantSearch,但是当我渲染时,我遇到了process 错误。这就是我放弃它的原因。
  • 您能否在我们的 github 存储库中打开一个包含您遇到的错误的问题?我们需要对此进行调查:)
  • @Marie 当然,我已经创建了票证。 github.com/algolia/react-instantsearch/issues/264

标签: javascript reactjs algolia preact


【解决方案1】:

Preact 有组件 Head。要安装它运行

yarn add preact-head

然后可以指定标准的头部元素,例如脚本、元等。E.x.应用程序.js

import Head from "preact-head";

export default class App extends Component {

        render() {
            return (
                <div id="app">
                    <Head>
                        <meta name="Whatever" />
                        <script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
                    </Head>

                </div>
            );
        }
    }

【讨论】:

  • 太甜了,如果早点发布应该是正确的答案。
【解决方案2】:

你可以动态插入脚本,试试这个:

componentWillMount() {
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js";
    script.async = true;

    script.onload = function() {
       // init your algolia code here
    }

    document.body.appendChild(script);
},

【讨论】:

  • var client = algoliasearch('app', 'key'); var index = client.initIndex('my_index'); algoliasearch 未定义
  • algoliasearch 将仅在脚本加载后定义。将此代码添加到 script.onload = () =&gt; {// your code //} 块。
  • 当我这样做时,我得到'ReferenceError:文档未定义'。有什么猜测吗?
  • @StormyKnight 似乎您在文档加载之前执行了函数。确保您的反应构建插入 标记内,而不是
【解决方案3】:

您可以将它添加到您的 index.html 中的 head 标签之间。 在 React 中,index.html 位于 public/index.html 在 Preact 中,index.html 位于 src/index.html

<head>
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
</head>

【讨论】:

  • preact-cli 中没有 html 文件。仅,.js 文件。
  • 如何将脚本下载到您的资产并使用require('../assets/instantsearch.min.js');(在 index.js 中)?也许也可以尝试使用cdn url而不是相对路径,但我不确定它是否有效。
  • 另外,这是一个带有 index.html github.com/developit/preact-todomvc/blob/master/src/index.html 的 preact 示例
【解决方案4】:

您可以安装包algoliasearch(如果包不正确,只需在https://npmjs.com搜索所需的包)

现在您可以在 package.json 所在的根级别执行 npm install algoliasearch --save 并在您的模块中使用它,如下所示 -

import algolia from 'algolia';

然后在你的代码中使用它的方法。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-21
    • 2019-11-09
    • 1970-01-01
    • 1970-01-01
    • 2014-07-17
    • 1970-01-01
    • 2017-10-14
    相关资源
    最近更新 更多