小编rug*_*ugk的帖子

我不想使用create-react-app. 那么如何为一个简单的 React 应用程序配置一个最小的工作开发环境呢？

注意：我知道我可能只是在运行时将所有内容都包含为 JS（这是有据可查的），但我不想要这个，因为我仍然想要一个可用于生产的版本！

我不想要的：

• 进行任何缩小（请参阅此处的相关问题）
• 进行任何连接（或者，如果更容易做到，我可能会将所有 JS 连接到一个文件中）
• 任何比我编写的 JS 更旧的浏览器支持（所以没有这样做的转译）
• 任何开发服务器（我可以手动重新加载。）
• 任何实时重新加载或高级开发功能

我确实想：

• 使用 React 组件
• （可选）包括 JSX（我知道可以在没有它的情况下使用 React，但假设这是我想从 React 中获得的最小优势。但是，请告诉我，设置/配置的哪些额外步骤会“花费”包括，所以这个答案适用于那些想要 JSX 的人和那些不想要的人。）

基本上，我只想使用 React。没有它周围的所有花哨的其他东西！*

我只是问这个，因为官方 React 文档没有提到这种可能性。

注意：为那些想知道为什么我想要这个的人推理。

* 实际上，忽略这些方便的开发功能等听起来太疯狂了。但我声称这有正当的理由/用例。我的意思是，所有这些对我来说都是不可用的/破坏了东西，因为我正在尝试使用 React 构建浏览器扩展。

是的，我看到了这个非常相似的问题，但不幸的是，用户比我领先一步，答案只是针对他们问题的非常具体的答案。我想先了解一般情况，即我需要什么以及如何设置？

我正在学习如何使用Firefox Web Extensions API,并且正在使用IntelliJ.

有没有办法获得API的代码完成/建议？

我按照下面的答案中的步骤,但似乎没有一个完整的Firefox.

/sf/answers/1782669591/

背景

我或多或少一直在遵循官方指南来设置带有react的本地开发环境，并且似乎使用了create-react-app，这确实设置了很多东西。

现在，如果我运行，npm run build我会在build文件夹中得到所有内容的缩小版本。但是，如果我运行npm startNodeJS提供的版本，则似乎没有任何修改。但是我看不到这些文件。

题

所以：

• 我可以访问npm start某处生成的文件吗？由于这些似乎未修改。（build从未在那里修改）
• 还是可以以某种方式运行npm run build，以便使用未最小化的文件进行“开发”构建？

尝试

我的目的只是获得对React脚本的最小化版本的访问。

至于最后一个问题，我尝试了该问题中建议的一些参数和环境变量，但是如您所见，它失败了：

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

系统

我的package.json具有默认脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

注意：请不要问我为什么这样做，或尝试说服我这是不好的。我可能想要这样做的原因有很多，例如调试或此特定用例。

假设我使用URL 接口来创建一个新的 URL。比如这样：

new URL('https://www.example.com/démonstration.html?query=6#bla')

现在我需要它作为一个普通的字符串。我如何最好地转换它？

注意：这里的例子是最小的例子。我显然不会将（硬编码）字符串转换为 URL 对象，然后再转换回字符串。为了给出一些上下文，假设我修改了两者之间的 URL 对象（可能使用用户输入）和/或将其传递给不同的函数左右。最后，我有一个 URL 对象并希望它是一个纯字符串。

我找到了以下方法：

• 通过href财产：

  (new URL('https://www.example.com/démonstration.html?query=6#bla')).href
  // "https://www.example.com/d%C3%A9monstration.html?query=6#bla"
  

  Run Code Online (Sandbox Code Playgroud)

• 通过toString方法：

  (new URL('https://www.example.com/démonstration.html?query=6#bla')).toString()
  // "https://www.example.com/d%C3%A9monstration.html?query=6#bla"
  

  Run Code Online (Sandbox Code Playgroud)

如您所见，在我的示例中，它返回的结果完全相同。

所以看看你注意到的文档：

• href 是“包含整个 URL 的 USVString”。
• toString 返回“包含整个 URL 的 USVString。它是 URL.href 的同义词，但它不能用于修改值。”

好吧，我不想修改它。但是真的没有区别吗？也许是关于性能、浏览器支持¹ 甚至代码风格？我必须决定一个，那么我应该选择哪一个？

¹ 实际上，我可以看到这些转换方式的兼容性表存在差异。所以我想还有一些遗留的实现可以以不同的方式处理事情。我不敢相信这些是真正的“同义词”，而浏览器支持中的这个花言巧语似乎支持这种信念。

背景

JavaScript ES6 规范支持模块导入，即ES6 模块。

静态导入使用起来很明显，并且已经有很好的浏览器支持，但动态导入仍然落后。
因此，您的代码很可能使用静态模块（当这些模块不受支持时，代码甚至不会执行），但浏览器可能会错过对动态导入的支持。因此，检测动态加载是否有效（在尝试实际加载代码之前）可能很有用。而作为浏览器检测是令人难以接受的，当然我想使用功能检测。

用例可能是显示错误，回退到某些其他数据/默认/加载算法，为开发人员提供在模块中动态加载（例如以惰性模式样式的数据）的优势，同时允许回退以传递直接数据等。基本上，可以使用特征检测的所有常见用例。

问题

现在，当动态模块被导入时，import('/modules/my-module.js')显然会尝试只检测函数是否存在，如下所示：

// this code does NOT work
if (import) {
    console.log("dynamic import supported")
}

我想，对于每个（？）其他函数，这都可以工作，但问题似乎是：import分别是ECMAScript 中的 保留关键字，现在显然也用于指示静态导入，它不是真正的功能。正如 MDN 所说，它是“类函数”。

尝试

import()导致语法错误，所以这不是真的可用，并import("")导致拒绝的承诺，这可能有用，但看起来真的很黑/像一种解决方法。此外，它需要一个异步上下文（await等）仅用于特征检测，这不是很好。
typeeof import也直接失败，导致语法错误，因为关键字（“unexpected token: keyword 'import'”）。

那么，可靠地检测浏览器是否支持动态ES6 模块的最佳方法是什么？

编辑：正如我看到的一些答案，请注意，该解决方案当然应该尽可能普遍可用，ieeg CSP可能会阻止使用evalPWA ，并且在 PWA 中，您不应假设您始终在线，因此只需尝试一些随意的请求文件可能会导致错误的结果。

Redis 具有身份验证功能，也可以使用不同的数据库，但这些功能能否以安全的方式组合在一起？

从MySQL我知道有一个用户管理，多个用户可以有多个密码，并且只能拥有一个数据库的权限。

出于安全原因，我希望在 Redis 中拥有类似的功能，因为目前我可以使用requirepass，但我必须将其添加到每个想要连接到 Redis 的应用程序中。（至少有一种方法可以使用多个密码吗requirepass？
我可以使用应用程序连接到一个数据库，但据我所知，这个应用程序也可以切换到另一个数据库。（我至少可以以某种方式阻止这种切换吗？）

出于性能原因，我想避免并行运行多个 Redis 实例。

背景

我必须对React应用程序使用内容安全策略。

之所以在这里不是什么大问题，是因为我正在创建一个WebExtension / Browser Extension /附加组件，并且这些附件确实具有这样的内容安全性策略，并且存在类似'unsafe-eval'且'unsafe-inline'被严格禁止的事情：

由于重大安全问题，addons.mozilla.org上列出的扩展名不允许在其CSP中使用'unsafe-eval'，'unsafe-inline'，远程脚本，blob或远程源的扩展名。

我已create-react-app严格按照本指南创建了该应用程序。目的是能够在那里使用WebExtensions的默认CSP进行响应，或者至少仅进行很小的调整。

但是请注意，出于安全原因，实际上也应该在“常规”网站上使用（如此严格的）CSP，因此，此问题不仅针对附加组件制造商。

问题

但是当我运行时npm run build，生成index.html的确包含了足够多的内联JS代码。

题

所以我该如何配置/使用反应以不这样做并...

1. 而是将所有JS / CSS代码放入单独的文件中？
2. 或添加名词或CSP允许的其他内容？
3. 或以类似方式解决该问题？

编辑

实际上，似乎开发版本（我在运行时创建npm start）没有这样的缩小。所以我问了一个单独的问题，关于如何从那里获取文件：如何在不缩小的情况下构建React的生产版本？

我正在为浏览器创建WebExtension。因此，我了解了browser.alarms API。它基本上允许您设置（重复发生或一次性）警报，并且将触发回调。

现在，我们已经在JavaScript setTimeout和and中拥有了很长一段时间的功能setInterval。那么与这些有什么不同？为什么或在什么情况下我会更喜欢一个？

我的意思是主要区别很明显：您只能在数分钟内（而不是数秒）重新启动它。虽然，我认为when您也可以以毫秒为单位取消注册和重新注册，但是我认为API的使用期限可能更长，例如几分钟。（我只是在这里猜测。）那么为什么我应该使用它而不是简单的setInterval/ setTimeout回调？