RequireJS + Algolia Docsearch抛出不匹配的匿名define()..错误

问题描述 投票:0回答:1

我正在尝试使用MadCap Flare实现Algolia Docsearch。 Flare是一种生成HTML输出的技术文档工具。

Docsearch的底层搜寻器已配置并在codepen中正常运行。但是,我遇到了将它与Flare集成的问题。 Flare有许多内置脚本,我无法访问或更改,包括require.js。我得到了一堆错误,Uncaught Error:不匹配的匿名define()模块..,当我运行构建时。

所以为了解决这个问题,我尝试使用require.js加载Docsearch js,我做错了。我的JS知识有限!

Html搜索输入:

<div class="input-group">
    <input id="<YOUR_CSS_SELECTOR>"  type="text" class="form-control" placeholder="Search" aria-label="Search Field" aria-describedby="infoSearch" />
</div>

原始的Algolia Docsearch CDN js和snippet是这样的:

<!-- Before the closing </body> -->
    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js">
    </script>
    <script>
    docsearch({
        apiKey: '<API_KEY>',
        indexName: '<INDEX_NAME>',
        inputSelector: '<YOUR_CSS_SELECTOR>',
        debug: false
    });
    </script>

因此,要使用require.js加载这些脚本,我已完成以下操作:

<script type="text/javascript">
require.config({
    enforceDefine: true,
    paths: {
        "docSearch": "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
    },
    waitSeconds: 40
});
require(['docSearch']);//This is probably not doing anything.
</script>
<script>
docsearch({
    apiKey: '<API_KEY>',
    indexName: '<INDEX_NAME>',
    inputSelector: '<YOUR_CSS_SELECTOR>',
    debug: false
}); //This throws "Uncaught Reference Error docsearch is not defined" error
</script>

我查看了其他主题/问题和require.js文档,但找不到可以弄清楚的东西。任何帮助/指导都会很棒!

javascript search requirejs algolia
1个回答
0
投票

我认为你应该包括类似的东西

    <script>
/* <![CDATA[ */

require.config( {
    paths: {
        "docsearchLib": "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min"
    }
}

);
require(["docsearchLib"], function(docsearch) {
    docsearch( {
        apiKey: '<API_KEY>', indexName: '<INDEX_NAME>', inputSelector: '<YOUR_CSS_SELECTOR>', debug: false,
    }
    );
}

);
/* ]]> */

</script>

你可能想看看https://docs.solace.com/,他们实际上是在使用DocSearch和require.js

© www.soinside.com 2019 - 2024. All rights reserved.