javascript - 如何在 NextJS 中添加自定义脚本包

问题描述

我有一些遗留的自定义 javascript，我需要将它们捆绑并_document.js作为链接放入。文件名应包含哈希。

实现这一目标的最佳方法是什么？

我尝试了有关输入/输出的 webpack 配置，但它们破坏了 NextJs 构建。

问题是我们使用了诸如窗口、文档等在服务器端崩溃的东西。

理想情况下，需要将其注入标签，作为编译/babelified javascript 代码。

我尝试的是

Webpack HTML 插件以及其他插件，如 InlineChunk 或 InlineSource 插件。它们不起作用，因为它们在 NextJS 不使用的 index.html 中生成代码。
使用 Raw Loader 获取文件内容。不起作用，因为它没有被 babelified。
向 Webpack 配置添加自定义条目，例如脚本：'path/to/my-entry.js'。没有用，因为它在文件中添加了一个哈希名称，我无法知道它。
在 NextJs polyfills 中添加一个自定义条目。我认为这是有道理的，但是 polyfill 标记有一个 nomodule 会阻止其代码在新浏览器上运行。
另一种选择是将javascript代码添加为字符串，然后使用，__dangerouslySetInnerHtml但问题是我在那里失去了linter和babel能力。
我尝试将其添加为页面，但在本地开发甚至构建时崩溃

webpack.config.js

module.exports = (nextConfig = {}) =>
  Object.assign({}, nextConfig, {
    webpack(config, options) {
      const nextJsEntries = config.entry;
      config.entry = async () => {
        const entries = await nextJsEntries();
        entries['pages/rscripts'] = 'test/test.js';
        return entries;
      };
   ...

然后在_document.js

<script src={`${publicRuntimeConfig.ASSET_PREFIX}/_next/${this.props.buildManifest.pages['/rscripts'][2]}`} />

标签： javascriptwebpacknext.jsbundle

您可以像import 'path/to/js_file'在 _app.js/app.tsx 文件中一样导入 js 文件

import "../styles/globals.css"
import "../js/test"

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

这个对我来说很好用

javascript - 如何在 NextJS 中添加自定义脚本包

问题描述

解决方案

推荐阅读