如何在 PreactJS 中包含外部 JavaScript 库？答案

【问题标题】：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 = () => {// 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';

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

【讨论】：