如何在PreactJS中引入外部JavaScript库？

Question

如何在PreactJS中引入外部JavaScript库？

3

我目前正在使用preactJS开发一个小项目，并且使用algolia进行搜索。我发现reactJS有一个针对algolia的组件，但遗憾的是preactJS没有相关组件。我的问题是如何将algolia的javascript文件引入到preactJS中？

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

- PPShein

此外，我不知道你是否注意到我们还有另一种InstantSearch的版本，React-InstantSearch，它可能更好地与你的preact应用程序集成。请随时向我们提供反馈意见。 - Marie

@Marie 我尝试使用 React-InstantSearch，但是当我渲染时，遇到了 process 错误。这就是为什么我放弃它的原因。 - PPShein

你能否在我们的 Github 存储库上开一个问题，详细说明你遇到的错误？我们需要对此进行调查 :) - Marie

@Marie 确认，我已经创建了工单。https://github.com/algolia/react-instantsearch/issues/264 - PPShein

4个回答

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);
},

- Nata Khitsan

var client = algoliasearch('app', 'key'); var index = client.initIndex('my_index');algoliasearch 未定义。 - PPShein

只有在脚本加载后才会定义algoliasearch。将此代码添加到script.onload = () => {// your code //}块中。 - Nata Khitsan

当我这样做时，会出现“ReferenceError: document未定义”的错误。有什么猜测原因吗？ - StormyKnight

@StormyKnight 看起来你在文档加载之前执行了函数。确保你的React构建插入到<body>标签中，而不是<head>中。 - Nata Khitsan

1

您可以安装algoliasearch包（如果包名称不正确，请在https://npmjs.com上搜索所需的包）

现在，在根目录中执行npm install algoliasearch --save，并在模块中使用它，如下所示 - import algolia from 'algolia'; 然后在代码中使用其方法。

- Srk95

0

你可以将它添加在 head 标签之间的 index.html 文件中。在 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>

- user6198643

在 preact-cli 中，没有 HTML 文件。只有 .js 文件。 - PPShein

把脚本下载到你的资源中，然后在 index.js 中使用 require('../assets/instantsearch.min.js'); 怎么样？或者尝试使用 CDN URL 而不是相对路径，但我不确定它是否有效。 - user6198643

此外，这是一个带有index.html的preact示例 https://github.com/developit/preact-todomvc/blob/master/src/index.html - user6198643

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mara · Accepted Answer

Preact有一个名为Head的组件。要安装它，请运行以下命令：

yarn add preact-head

然后就可以指定标准的头部元素，如脚本、元数据等。例如：app.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>
            );
        }
    }