我使用 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 的开发服务器和 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 包之前使用 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 文件夹并重新安装包再次解决了我的问题。
在我的 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 提示我解决
pandas.Series.replace 的文档包含一个示例： >> 将 pandas 导入为 pd >> s = pd.Series([1, 2, 3, 4, 5]) >> s.replace([1, 2], method='bfill') 0 3 1 3 2 3 ...
#包括 int (*createArray())[3] { 静态 int arr[2][3] = {{1, 2, 3}, {4, 5, 6}}; 返回 arr； } int main() { int (*ptr)[3] = createArray(); 对于 (int i = 0; i &l...
如何执行 QtWidgets.QTableWidget.setHorizontalHeader() 来保持默认行为？
pyqt5。常规表： 从 PyQt5 导入 QtWidgets 应用程序 = QtWidgets.QApplication([]) 表 = QtWidgets.QTableWidget(3, 3) table.setHorizontalHeaderLabels(['1', '2', '3']) 表.show() app.exec_()...
Python 3（标准实现）是否保证以下代码始终生成字符串 2, 3, 1？ ', '.join(['2', '3', '1']) 如果是，此功能（订单保持）在哪里记录？...
我有一个 PROJECT_EFFORT 表。 项目 ID、年份、月份、工作量 1, 2022, 12, 10 2, 2022, 12, 20 2, 2023, 1, 100 2, 2023, 2, 50 2, 2023, 3, 30 3, 2023, 3, 40 3, 2023, 4, 10 3, 2023, 5, 120 4、...
这里我编写了一个程序，它将找到所有子集数组，就像数组是 [1, 2, 3] 一样，我想要输出像 [[], 2],, 2, , [2, 1 ], 3, , [3, 1], [3, 2], [3 我写了一个程序
我有 3 个集群，每个集群有 3 个节点。所有 3 个集群均使用双向引导复制进行链接。我正在做一些压力测试。 场景 1：其中一个数据中心发生故障...
我有一个如下数据框，其中有 3 列，每列代表在单个活动中花费的时间比例。 df <- data.frame(ID = c(1, 2, 3, 4), (time_1 = c(0.25...
st = take(`a, 7) 加入 take(`b, 6) 日期 = 2023.08.01 + 0 1 3 6 7 8 9 0 1 2 3 8 9 值 = 35 34 35.79 33.26 32.88 33.73 31 25 24 22 25.79 21 31 t = 表（st、日期、val） 市场日 = 2023.08.01 + 0 1 2 3...
我通过网络套接字发送了 12 个字节，用于表示 3 个浮点值。另一个程序执行此操作： 浮点 m_floatArray[3]; ... Serial.write((byte*) m_floatArray, 12); //12 b/c 3 浮在 4
比较简单的数学题，求3的范围<= Abs[6 - x] <= 5. Not hard to solve by hand, and Mathematica nails it, with the answer 1 <= x <= 3 || 9 <= x <= 11. The
我有一个ansible列表值： 主机= [“站点1”，“站点2”，“站点3”] 如果我尝试这个： 主持人 |加入（”， ”） 我得到： 站点 1、站点 2、站点 3 但我想得到： “站点1”、“站点2”、“站点3”
从另一个页面启动幻灯片拼图项目时出错。 类 PuzzlePage 扩展 StatefulWidget { 最终 int 行、列； PuzzlePage({int 列 = 3, int 行 = 3}) ：列 =
我的数据集有问题 月 年 销售量 1 2021年 100 2 2021年 150 3 2021年 200 1 2022年 100 2 2022年 140 3 2022年 120 1 2023年 100 2 2023年 100 3 2023年 100 我想添加一个新列，例如...
我收集了一些。 1 2 3 例如，当我删除 2 时，集合将变为 1,3。但是，当我去添加另一个项目时，列表变成 1 3 3 因为顺序是基本的...
如何决定torchsummary.summary(model=model.policy, input_size=(int, int, int))的'input_size'参数？
这是我的 CNN 网络，由“print(model.policy)”打印： CNN政策( （演员）： 演员（ (features_extractor): CustomCNN( (cnn): 顺序( (0): Conv2d(1, 32, kernel_size=(3, 3), st...
在 SQL Developer 上运行创建表学生时出错：CREATE TABLE Students
创建表学生（ 年号(4) NOT NULL, 学期 VARCHAR2(1) NOT NULL CONSTRAINT Stu_sem_ck CHECK (学期 IN ('1', '2', '3')), 部门 VARCHAR2(3) NOT NULL, 课程编号...
你好，我有 3 个程序，我每天都会一一运行，我想创建一个 bat 文件来运行这 3 个 exe 文件，但我无法让它工作。 这是我的文件： @回声关闭 echo“开始音频” 圣...
DHCP响应中的giaddr字段和DHCP option 3有什么区别？
我有一个已经使用多年的 DHCP 客户端。到目前为止，它始终从 DHCP 选项 #3 获取其网关 IP 地址。现在使用不提供选项 3 的新 DHCP 服务器运行（是的，我...
oldnames[i+3]='汤姆' newnames[i]='汤姆' 当两个参数具有相同的值时（见上文），为什么我的代码会执行？ 对于 (var i=0 ; i oldnames[i+3]='汤姆' newnames[i]='汤姆' 当两个参数具有相同的值（见上文）时，为什么我的代码会执行？ for (var i=0 ; i<pocet2 ; i++) { var oldnaz=(oldnames[i+3]).toString(); var newnaz=(newnames[i]); oldnaz=oldnaz.toString(); newnaz=newnaz.toString(); //Logger.log("oldname = "+oldnaz); //Logger.log("newname = "+newnaz); if(newnames[i]=='' ) { //Logger.log(ss.getSheetByName(oldnames[i+3]).getSheetName()); //Logger.log(i); //Logger.log(i+3); ss.getSheetByName(oldnames[i+3]).setName((i+1).toString()); } ** else if(newnames[i] != oldnames[i+3]) { //Logger.log(newnames[i]); //Logger.log(oldnames[i+3]); ss.getSheetByName(oldnames[i+3]).setName(newnames[i]); }** else { //Nothing } } 我尝试对代码进行一些更改，但结果在各方面都是如此：条件为 TRUE。 但是当第一个值是 Tom 并且第二个值是 Tom 时，则 else if(Tom != Tom) 应该为 FALSE。 非常感谢您的提示。 如果 oldnames 和 newnames 来自使用 range.getValues() 的范围，则这两个变量都是二维数组而不是一维数组。 因此，oldnames[i+3]='Tom' newnames[i]='Tom'是假的，那就是 oldnames[i+3]=['Tom']; //array newnames[i]=['Tom']; /*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/ const newname=['Tom']; const oldname=['Tom']; console.log(newname != oldname);//expected true <!-- https://meta.stackoverflow.com/a/375985/ --> <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 两个数组无法进行比较。获取里面的字符串并比较： else if(newnames[i][0] != oldnames[i+3][0])
我有下表，需要查找每个客户发送的电子邮件的 3 个月滚动总数。 客户 ID 日期 邮件已发送 1 2023-06-30 2 1 2023-05-31 无效的 1 2023-04-30 3 1 2023-03-31 2 1 2...
我有一个包含元素的数组，例如 array = ["example1", "example2", "example3"]。 如何按以下格式打印？ 示例 1 2. 示例 2 3. 示例 3...
CI 是给定的向量。每个元素都是笛卡尔索引。 朱莉娅> CI 5 元素向量{CartesianIndex{3}}： 笛卡尔索引(1, 3, 1) ...
我有一个字典 富： A： AA1：1 AA2：2 乙： BB1：3 BB2：4 我想将其转换为： - {键：a，子键：aa1，值：1} - {键：a，子键：aa2，值：2} - {键：b，子键：bb1，值：3} - ...
假设你有一个主表，其中有一些数据 主ID 主数据 -------- ---------- 1 数据1 2 数据2 3 数据3 以及引用主表的明细表
我想保存单个单元格的累加和。 例如： 如果在单元格 E2 中写了 3，我希望单元格 F2 保存值 3。 如果E2更改为2，则将旧值3添加到新值2并显示...
使用多个实例访问 SpringBoot 3/Hibernate 6 中的 Envers 修订版
在 SpringBoot 3 (Hibernate 6) 中，序列生成器现在分配多个增量。这也适用于 Envers 修订号。 隐式 seq 的默认值...
给定一个字符串 s，求最长不包含重复字符的子串的长度。 输入：s =“abcabcbb” 输出：3 解释：答案是“abc”，长度为3。 ...
我想要一行代码能够找到 Fin1 列中每 3 列值的中位数。例如，第一个值将为 1.54、5.08 和 5.26 中的 5.08。第二个将是 5.27...
我可以在两种相同的类型上使用 except() ，例如： var list1 = 新列表 { 1 , 2 , 3 , 5 , 9 }; var list2 = 新列表 { 4 , 3 , 9 }; var ExpectedList = list1.Except(list2);//结果: {...
开发工具错误 我目前正在尝试在我的 nuxt 3 项目中实现 PWA 功能，但我不断遇到这个问题：[Vue Router warn]: No match found for location with path "/icon_512x512...
在 vuetify 3 中创建 v-stepper 本质上有两种方法。您可以使用属性或模板/槽。 我无法使用属性方法，因为由于某种原因，转换很混乱......
关于微软针对 azure 应用程序服务的声明，摘自此处 https://learn.microsoft.com/en-us/azure/app-service/manage-disaster-recovery “从 2025 年 3 月 31 日开始，Azure ...
我正在从 grails 3 升级到 grails 4 但运行时出现以下错误 错误 org.springframework.boot.diagnostics.LoggingFailureAnalysisReporter - **************************
我有这个文件 $猫测试.txt 49808830/ccs 9492 塔卡 3 175833950/ccs 971 ACCC 1 180422692/ccs 971 ACCC 10 110952448/ccs 9714 标签 2 117309969/ccs 9714 标签 4 119998610/ccs 9714 标签 5 17150946...
给出以下示例： 是否有可能检测网络中的环路（I1、I2、I3、C6、C7、I5）？ 我尝试过： simple_cycles → 它适用于 3 个节点，但不适用于超过 3 个节点。 我会...
编写一个打印出数字序列的递归方法。 printSequence(4) 打印 1 2 3 4 3 2 1 公开课练习{ 公共静态无效主（字符串[] args）{ 打印序列（4）； ...
假设有一个表，其中混合了国家、城市、子城市等数据。例子： 名称 |编号 |父 ID 1) 英国 | 1 | 0; 2) 伦敦 | 2 | 1; 3) 南伦敦 | 3 | 2； 我明白了...