elM*_*uis 4 javascript webpack next.js
当我的 Next JS 应用程序编译时，它会生成一个要包含的脚本文件列表，如下所示。
<script src="/_next/static/chunks/main-1234.js" async=""></script>
<script src="/_next/static/chunks/webpack-1234.js" async=""></script>
<script src="/_next/static/chunks/framework.1234.js" async=""></script>
<script src="/_next/static/chunks/1234.5678.js" async=""></script>
<script src="/_next/static/chunks/commons.1234.js" async=""></script>
<script src="/_next/static/chunks/pages/_app-1234.js" async=""></script>
<script src="/_next/static/chunks/1234.5678.js" async=""></script>
<script src="/_next/static/chunks/pages/%5B%5B...path%5D%5D-1234.js" async=""></script>
<script src="/_next/static/1234/_buildManifest.js" async=""></script>
<script src="/_next/static/1234/_ssgManifest.js" async=""></script>
我想像这样向其中一些添加自定义数据属性。
<script data-cookieconsent="ignore" src="/_next/static/chunks/pages/%5B%5B...path%5D%5D-1234.js" async=""></script>
我已经尝试在 next.config.js 文件中执行此操作，因为我知道可以在其中进行 webpack 覆盖，但我没有看到向动态生成的 js 文件添加数据属性的方法。
您需要getScripts从文件Head中的类进行扩展和修改_document.js。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class CustomHead extends Head {
getScripts(files) {
const originalScripts = super.getScripts(files);
return originalScripts.map((script) => {
return React.cloneElement(script, {
'data-cookieconsent': this.props.cookieconsent
});
});
}
}
class CustomDocument extends Document {
render() {
return (
<Html>
<CustomHead cookieconsent="ignore" />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default CustomDocument
另一种解决方案是扩展文件NextScript中的类_document.js，以便将自定义data-*属性包含在 Next.js 生成的脚本中。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class CustomNextScript extends NextScript {
getScripts(files) {
const originalScripts = super.getScripts(files);
return originalScripts.map((script) => {
return React.cloneElement(script, {
'data-cookieconsent': this.props.cookieconsent
});
});
}
}
class CustomDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<CustomNextScript cookieconsent="ignore" />
</body>
</Html>
)
}
}
export default CustomDocument