如何在Next.js中初始化jQuery及Revolution Slider？

我清楚jQuery直接操作DOM违反React设计原则，但目前只能用Revolution Slider实现需求。我参照教程将初始化代码放到_document.tsx中，却触发了报错。

尝试的初始化代码 #

<script type="text/javascript">
    jQuery(document).ready(function() {
           jQuery('.tp-banner').revolution(
            {
                delay:9000,
                startwidth:1170,
                startheight:500,
                hideThumbs:10
            });
    });
</script>

报错信息 #

Unhandled Runtime Error
TypeError: jQuery(...).revolution is not a function

Call Stack
HTMLDocument.<anonymous>
/ (3:40)
fire
https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js (3074:30)

完整_document.tsx代码 #

import Document, {
    Html,
    Head,
    Main,
    NextScript,
    DocumentContext,
} from 'next/document'

export default class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                    {/* 加载Google CDN的jQuery */}
                    <script
                        type="text/javascript"
                        src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"
                        crossOrigin="anonymous"
                    />

                    {/* 全局样式 */}
                    <link
                        rel="stylesheet"
                        type="text/css"
                        href="css/style.css"
                        media="screen"
                    />

                    {/* Revolution Slider核心脚本 */}
                    <script
                        type="text/javascript"
                        src="rs-plugin/js/jquery.themepunch.plugins.min.js"
                    />
                    <script
                        type="text/javascript"
                        src="rs-plugin/js/jquery.themepunch.revolution.min.js"
                    />

                    {/* Revolution Slider样式 */}
                    <link
                        rel="stylesheet"
                        type="text/css"
                        href="rs-plugin/css/settings.css"
                        media="screen"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                    {/* 初始化Revolution Slider */}
                    <script
                        type="text/javascript"
                        dangerouslySetInnerHTML={{
                            __html: `
                jQuery(document).ready(function() {
                  jQuery('.tp-banner').revolution({
                    delay: 9000,
                    startwidth: 1170,
                    startheight: 500,
                    hideThumbs: 10
                  });
                });
              `,
                        }}
                    />
                </body>
            </Html>
        )
    }
}

解决方法 #

1. 调整脚本加载顺序 #

Revolution Slider的插件脚本依赖jQuery，且必须在初始化代码前加载完成。目前你把插件脚本放在<Head>中，可能因Next.js的资源加载机制导致脚本未就绪就执行初始化。将插件脚本移到<body>内、初始化代码之前：

<body>
    <Main />
    <NextScript />
    {/* 移至body内，确保初始化前加载完成 */}
    <script
        type="text/javascript"
        src="/rs-plugin/js/jquery.themepunch.plugins.min.js"
    />
    <script
        type="text/javascript"
        src="/rs-plugin/js/jquery.themepunch.revolution.min.js"
    />
    {/* 初始化代码 */}
    <script
        type="text/javascript"
        dangerouslySetInnerHTML={{
            __html: `
                jQuery(document).ready(function() {
                  jQuery('.tp-banner').revolution({
                    delay: 9000,
                    startwidth: 1170,
                    startheight: 500,
                    hideThumbs: 10
                  });
                });
              `,
        }}
    />
</body>

2. 修正静态资源路径 #

Next.js的静态资源需放在public目录下，脚本路径前要加斜杠（/rs-plugin/...），否则会找不到文件，导致插件未加载成功。

3. 确保jQuery全局可访问 #

Next.js可能隔离全局变量，改用window.jQuery访问全局jQuery对象，避免找不到变量：

window.jQuery(document).ready(function() {
  window.jQuery('.tp-banner').revolution({
    delay: 9000,
    startwidth: 1170,
    startheight: 500,
    hideThumbs: 10
  });
});

4. 用原生事件确保DOM就绪 #

替换jQuery.ready为原生DOMContentLoaded事件，同时增加插件存在检查：

document.addEventListener('DOMContentLoaded', function() {
  if (window.jQuery && window.jQuery.fn.revolution) {
    window.jQuery('.tp-banner').revolution({
      delay: 9000,
      startwidth: 1170,
      startheight: 500,
      hideThumbs: 10
    });
  }
});

内容的提问来源于stack exchange，提问作者János