我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code><script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做？</p> <p>额外问题：之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值？</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4，海里有很多鱼——只需使用任何注入属性的插件，例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是，上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码，将所有生成的脚本插入到结果文件中：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" th:attr="nonce=${cspNonce}" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>
当我尝试编译 React 应用程序时，Webpack 无法编译错误
无法解析源映射：'webpack:///../../src/chains/index.ts' URL 不受支持 无法解析源映射：'webpack:///../../src/eips/index.ts' URL 不受支持 无法解析源代码...
Webpack IgnorePlugin 不适用于 date-fns 区域设置文件
我尝试使用 IgnorePlugin 从 Webpack 配置中的 date-fns 包中排除区域设置文件。然而，尽管我进行了配置，Webpack 仍然将语言环境文件包含在
我正在尝试设置 webpack 的开发服务器和 HMR 来配合 Shopify 主题开发。当运行服务器并打开本地 IP 时，我从 Shopify 的 DNS 提供商 CloudFlare 收到此错误......
我最近启动了带有临时和生产环境的 Heroku 管道。我的应用程序是使用 React、NodeJS 和 Webpack 构建的。 当我部署到 staging 时，我的 baseURL 是生产 url，但它...
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
在项目上运行 npm run start:webpack 脚本会产生长达几页的亮黄色警告： [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] 解决“@babel/he...
从 'react' 导入 React, { useEffect, useRef, useState }; // eslint-disable-line import/no-webpack-loader-syntax // @ts-忽略 从'！mapbox-gl'导入mapboxgl； 导入'mapbox-gl/dist/mapbox-gl....
在我的 React Typescript 应用程序中，我收到此错误。 webpack 编译时出现 1 个警告 src/App.tsx 中出现错误：30:21 TS2304：找不到名称“DecompressionStream”。 28 | 28 const enc = new TextEncoder()...
安装pact-lang-api后Webpack/polyfill出错
在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息： ./
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。 然而，TailwindCSS 实用程序类不...
`我的 React 应用程序运行良好，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。 在终端中，我得到： webpack 编译成功 但在 chrome 控制台中...
webpack devserver 代理到 https，给出“尝试代理请求时发生错误”和 SELF_SIGNED_CERT_IN_CHAIN
尝试设置从本地主机到 https 站点的代理时看到以下错误 [HPM] 尝试将请求 /api/analytics/getDataByPage 从 localhost:8080 代理到 https://exam 时出错...
我已经签出了一个非常旧的功能分支，并且想要对 master 进行变基。 但是，有一些 webpack 构建文件未包含在 .gitignore 中，这会导致 rebase 提示我解决
我正在尝试将 Angular 版本从 16 升级到 17，但当我执行 npm start 时，它会抛出以下错误。有人可以告诉我该怎么做吗？
./src/main.ts - 错误：模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）： 错误：无法将类型实体 i11.MatLegacySelectModule 解析为符号 ./src/polyfills.ts - 错误：
当尝试运行yarn install时，我得到： [1/5] 验证 package.json... [2/5] 正在解析包... [3/5] 正在获取包裹... 错误错误：http://------------.int:8080/tfs/-------/_packagin...
定义一个索引，每次在r数据表中的某一列中找到相同值时该索引增加
我有一个如下所示的data.table： 例子 <- data.table(time = 1:30, A = c(rep("a", 5), rep("b", 5), rep("a", 5), r...
我正在寻找一种对数组的每个 N 元素进行排序的算法。 例如，数组为 7 8 6 4 5 1 4 3 5，N 为 3。 我希望排序后的数组为 6 7 8 1 4 5 3 4 5 请注意...
Entity Framework .NET 8 将数据保存为 JSON 对象
我想像这样在SQL Server中保存数据： 准备 ： [ "访问前查看客户数据": "5", “setSmartObjectivesForVisit”：“5”，...
JSF java.lang.IllegalArgumentException：无法将 5 类型的 class java.lang.Integer 转换为 class
我收到转换器的新错误 javax.faces.component.UpdateModelException：java.lang.IllegalArgumentException：无法将 5 类型类 java.lang.Integer 转换为类 com.jpa.entity.Groups 在
部署过程中出现以下错误： 5:30:38 PM：[nodemon] 启动 `node server.js` 5:30:39 PM：服务器监听 http://localhost:3000 5:30:39 PM：/opt/build/repo/node_modules/mongodb...
如何扩大pandas数据框中值之间的距离？ A 1 3 2 5 3 6 5 5 6 9 我想将相邻元素之间的距离增加x倍，例如两倍。 预期输出： ...
我有以下代码： 与 Ada.Text_IO；使用 Ada.Text_IO； 程序主要是 FiveIsLessThanZero ：布尔值； 开始 FiveIsLessThanZero := (如果 5 < 0 then 0 > 5); Put_Line (
spatial_data = [[1,2,3,4,5,6], ....., [1,2,3,4,50,60]] #长度1000万 参考 = [[9, 39, 22, 28, 25, 5], ...... , [5, 16, 12, 34, 3, 9]] # 长度 100 对于参考中的 x： 结果 = [c 为...
我正在使用 R 编程语言。 考虑以下情况 - 对于均值为 5 且 sigma=5 的正态分布： A) 基于数值积分，
我这样使用cva： 导出 const checkboxVariants = cva('边框 ...', { 变体：{ 尺寸： { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', }, },
我正在尝试将下面的固定脚本从版本 1 转换为版本 5。我陷入了突出显示的步骤。我需要版本 5 中的此代码，因为我必须将此代码与我的另一个版本合并...
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
我正在尝试在 Spring Boot 5 中的 oAuth 客户端上启用 PKCE。我能找到的示例适用于反应式客户端，如下所示： SecurityWebFilterChain springSecurityFilterChain(
我正在尝试调整绘图大小以适合我的文档，但我很难将绘制的图表变成正方形。 例子： pdf(文件=“./out.pdf”，宽度=5，高度=5) <- ggplot(
我将图像放入 div 中。当我将鼠标移入 div 时，图像每秒应减小 5%。我已经完成了这个脚本，但没有任何反应。 document.addEventListener("DOMContentLoaded...
对数组进行排序。输入--> [3,4,5,1,2]预期输出--->[5,2,3,1,4]
输入：nums = [3, 4, 5, 1, 2] 输出：nums = [5, 2, 3, 1, 4] 解释：在此示例中，偶数 [4, 2] 位于位置 [1, 4]。 它们按升序排序并放置在...
我有一个要求，我需要读取 wc -l 命令的值。基本上我运行以下命令来获取值 5： bash-3.2$ wc -l 样本.tcl 5 样本.tcl 现在使用 tcl 和 e...
FVM 安装错误 FormatException：无效的 UTF-8 字节（偏移量 5）
我尝试通过fvm下载flutter sdk，但是不允许出现此错误 C:\>fvm install stable 创建本地镜像...未处理的异常：FormatException: Invalid UTF-8 byte (at offset 5) #...
如果 $C$5="Y"，下面的公式返回至少 10 个值（如果包括对角线值）。如果 $C$5="Y"，我们如何才能获得非对角线值。 =VSTACK({"V1","V...
我想使用位移位将三个字符组合成一个短片。这是为了实现 RGB565 调色板（其中 5 位用于红色，6 位用于绿色，5 位用于蓝色）。 这是我的例子
Java 应用程序中索引::5、jdbc 和 oracle 处缺少 IN 或 OUT 参数
尽管我只有 4 个占位符，但我收到错误 Missing IN or OUT parameter at index:: 5 下面是 jpql 和我正在使用 setParameters 的方法。 私有静态最终字符串
我创建了一个使用 RDP（递归下降解析器）的计算器来解析和评估数学表达式“例如：5cos(30) -5(3+5)”。问题是我也尝试过包含通讯...
我在form1设计器中添加了一个计时器。 在form1的顶部： 私有 int countdownSeconds = 300; // 5分钟 私有秒表秒表=新秒表（）； form1 构造函数： 公共表格1() {
我使用 django-ckeditor-5 包成功显示了 ckeditor5，但无法上传图像，并且无法在结果页面上显示 youtube 视频。 这是我在后端控制台上遇到的错误...
如何在 mac m1 中安装.net 5 sdk [已关闭]
无法在我的 mac m1 中安装 .net 5 sdk。我正在尝试编译一个 C# 项目及其要求 .net 5.0 sdk。 我尝试从官方网站下载它，但arm64不存在...
这里，我写了一个程序，遍历并反转数组元素的最后一部分，就像数组是[5, 17, 11, 10, 12, 6]，我想要输出像[5, 17 , 11, 6, 12, 10]，所以我有
Django 5 的 MultiSelectField 库有哪些替代品？
角色 = [ （“管理员”，“Администратор”）， （“用户”，“Пользователь”）， ] 类权限（模型.模型）： 标题 = models.CharField(max_length=100)
如何使用axios在vuejs中渲染easydatatable
我使用 axios 获取这些数据 { “qtp1459016715-18382027”：{ “姓名”：“qtp1459016715-18382027”， “状态”：“5”， “优先”...
从 5 个并发用户每秒运行 5 个请求开始，然后增加到 10 个用户，然后每秒运行 10 个请求。 您能帮忙介绍一下如何在 JMeter 中设计上述场景吗？
我有一个 C++ 数组。 std::array arr { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; 我想反转最后五个元素，最终得到 { 0, 1, 2, 3, 4, 9, 8, 7, 6, 5 }。我知道 std::array 给出...
我需要创建一个成绩计算器，将5次测试的结果放入其中并求平均值，并给出5个成绩的结果，我制作了最终成绩结果程序，但我不知道...
出于某种原因，我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案，它似乎在 Bootstrap 5 中不起作用。 错误：未捕获类型错误：c.nextElementSibling.collapse i...
有人可以解释为什么警报在 postfix 下仍然显示 5 吗？我知道前缀标识最后一次迭代是假的，但是使用后缀，它仍然会返回 i 作为 5。 // 前缀代码： 让我= 0;
我正在尝试制作网格布局。网格中有 7 个项目。 我想要显示的布局如下。 1 3 6 2 4 7 5 上面代码显示的实际布局是 1 2 3 4 5 6 ...