create-react-app 相关问题

create-react-app是一个入门套件，用于创建没有构建配置的React应用程序。如果您开始使用React，请使用此选项来自动构建应用程序。没有配置文件，react-scripts是package.json中唯一的额外构建依赖项。您的环境将拥有构建现代React应用程序所需的一切。

反应应用程序（编译）“图标”

在过去的几年中，我多次编译了该代码的版本。

create-react-app react-app-rewired

回答 0 投票 0

如何在React项目中更改生产构建静态文件夹路径？

npm run build <code>index.html</code> 您可以看到，路径集为<pre><code><script src="./static/js/5.a4bfdba9.chunk.js"></script> </code></pre><pre> </pre>，但我希望将路径设置为<code>./static/js/</code><pre></pre> 我无法弄清楚在何处或何处可以确保每次运行构建时，它都会采用我指定的路径而不是默认路径？<pre></pre> 注：<pre>我在</pre><code>./static/dashboard/js/5.a4bfdba9.chunk.js</code>中查看<code>"homepage": "."</code>属性，但是更改此属性只会在<code>package.json</code>之前附加一条路径 <pre> </pre> today有一个更好的解决方案。来自<pre>hashRocket</pre>：<pre> </pre>当我构建CRA应用程序时，我会为以 /静态开头的资产（CS，图像）提供一条路径。如果我将应用程序部署到<code>/static/js/</code></question>，那么该应用程序将尝试访问<answer tick="false" vote="15"><code>https://something.com/myapp</code>处的这些资产路径。那不是资产所居住的地方。资产居住在<a href="https://til.hashrocket.com/posts/xtgpx9kssz-set-the-relative-path-of-assets-in-a-cra-app" rel="noreferrer"><code>https://something.com/static/asset.css</code></a>。 Create React应用程序允许您更改A内置资产的前缀，该资产具有<code>https://something.com/myapp/static/asset.css</code>文件中的主页属性。您可以将其设置为MyApp：<pre> </pre><code>package.json</code><pre> 然后资产将具有</pre><code>"homepage": "/myapp" </code><pre></pre>的路径 在我的情况下，我对我的<pre><code>/myapp/static/asset.css</code></pre>进行了以下更改： <code>package.json</code> <pre>这是因为我有一个nginx反向代理，可服务于另一个端点，因此我所有的静态资产都必须从</pre><code> "homepage": "/search", "build": "react-scripts build && mkdir build/search && mv build/static build/search/static" </code>提供。 <pre> </pre> <hr/>update：<pre> 您将需要更新WebPack配置以实现此目的。有多种方法：</pre> <pre>反应式弹出（不建议）</pre> -patch-package<pre> </pre>反理申请 - 涂层 <pre> 我正在为</pre><code>/search</code>。您需要更改React-Scripts软件包的文件</answer><code>/search/static</code><answer tick="true" vote="8">文件。这是您需要做出的一些更改的差异： <code>patch-package</code> 现在，如果您对<code>config/webpack.config.js</code>进行这些更改，则将输出的文件输出到所需的文件夹和index.html也将具有正确的路径。但是，如果您安装/卸载任何软件包，则Node_modules的更改将被覆盖。为了坚持这些更改，您可以使用<ol>Patch-package<li>，它将在安装后写下您的node_modules的更改。 </li>这里是设置补丁包装的步骤，您可以阅读其<li>readme文件</li>有关更多详细信息：<li> </li> </ol><pre><code>diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js index 26c2a65..ad29fbd 100644 --- a/node_modules/react-scripts/config/webpack.config.js +++ b/node_modules/react-scripts/config/webpack.config.js @@ -212,13 +212,13 @@ module.exports = function (webpackEnv) { // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. filename: isEnvProduction - ? 'static/js/[name].[contenthash:8].js' + ? 'static/dashboard/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js', // TODO: remove this when upgrading to webpack 5 futureEmitAssets: true, // There are also additional JS chunk files if you use code splitting. chunkFilename: isEnvProduction - ? 'static/js/[name].[contenthash:8].chunk.js' + ? 'static/dashboard/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js', // webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. @@ -676,8 +676,8 @@ module.exports = function (webpackEnv) { new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional - filename: 'static/css/[name].[contenthash:8].css', - chunkFilename: 'static/css/[name].[contenthash:8].chunk.css', + filename: 'static/dashboard/css/[name].[contenthash:8].css', + chunkFilename: 'static/dashboard/css/[name].[contenthash:8].chunk.css', }), // Generate an asset manifest file with the following content: // - "files" key: Mapping of all asset filenames to their corresponding </code></pre> <pre> </pre>在package.json的脚本部分中添加了此内容：<pre> </pre><code>node_modules/react-scripts/config/webpack.config.js</code><pre> </pre> <a href="https://www.npmjs.com/package/patch-package" rel="noreferrer">run patch-ackage以创建.patch文件：</a> <code>yarn add patch-package postinstall-postinstall</code><a href="https://github.com/ds300/patch-package#readme" rel="noreferrer"> </a> <ol>召集补丁文件以与您的团队共享修复程序<li> <code>"postinstall": "patch-package"</code><pre></pre> <code>npx patch-package some-package</code></li><li> <pre>我也创建了一个</pre>库存储库供您参考。 </li><li>答案： <pre></pre>战争：不适用于移动构建文件夹的内容。只能移动整个构建文件夹。例如：</li><code>git add patches/react-scripts+4.0.3.patch</code><li> 改变创建React应用程序的设置，以便将其输出到不同文件夹将非常复杂。但是您可以在构建完成后移动文件，这很简单。 <pre>在您的包裹中。 </pre><code>git commit -m "change output dir structure in react-scripts"</code> <pre>您可以添加另一个称为the build后进行操作的脚本，并将由NPM/YARN自动调用。 </pre><code>mv build/ dist/</code> </li>该文件应将文件移至其他文件夹。 </ol> <a href="https://github.com/vaibhavhrt/cra-custom-build-dir-structure" rel="noreferrer">1-纱线添加 @craco/craco 2-创建craco.config.js文件 3 craco.config.js = </a><code>"scripts": { "build": "react-scripts build" </code>$ {staticfileName}/js/[name]。[contentHash].chunk.js<code>postbuild</code>$ {staticfilename}/js/[name] <code>"postbuild": "mv build/ dist/" </code> };` <pre> </pre>中其他任何人都遇到了类似的问题。我的问题是，项目名称已被置于静态路径上。 路径是<code>module.exports = { webpack: { configure: (webpackConfig) => { webpackConfig.output.chunkFilename = </code>而不是<code>; webpackConfig.output.filename = </code><pre> </pre>关注解决方案，只要我遇到了一个注释，即从主页推断出“公共路径”。在我的主页URL中包括项目名称。 <pre>wrong</pre> “主页”：“ https：// {url} .io/project-name” <pre></pre>纠正 “主页”：“ https：// {url} .io/project-name” 从此URL中删除项目名称解决了问题。 </answer><answer tick="false" vote="0">

javascript reactjs npm build create-react-app

回答 0 投票 0

从创建React应用程序中创建NPM软件包并在Gitlab

这可能是一个愚蠢的问题，但我真的不知道发生了什么。我已经创建了一个使用Crate React应用程序的React应用程序，并将其作为私人存储库上传到我的GitLab帐户。（默认）...

npm gitlab create-react-app npm-publish npm-package

回答 1 投票 0

typecript返回有错误的持续错误

javascript typescript create-react-app tsx

回答 1 投票 0

在创建反应中使用ESM KY模块的运行测试

我有一个CRA打字稿应用程序，我正在尝试运行测试，但是当他们偶然发现Ky Import时，它们会出错。

typescript testing jestjs create-react-app ky