标签: react-scripts

在我的 package.json 文件中，我有 "homepage" : "http://myname.project.com/myapp",

我使用构建应用程序npm run build，输出确认创建了一个 /build 目录。输出：

102.97 KB 构建/静态/js/main.bfa46b52.js

24.37 KB 构建/静态/css/main.cfe8a47e.css

该项目是在假设它托管在 /myapp/ 的情况下构建的。您可以使用 package.json 中的主页字段来控制它。

构建文件夹已准备好部署。

如果我使用启动应用程序npm start或serve -s build应用程序将启动并且 index.html 页面将加载，但从 index.html 对静态资源的引用已损坏（/myapp/static/js/main.js 和 /myapp/static/css /main.css）。我可以在没有 /myapp 的情况下直接导航到它们（localhost:5000/static/js/main.js 有效；localhost:5000/myapp/static/js/main.js 无效）

如果我将构建文件夹部署到 /myapp 目录下的其他普通旧 apache 服务器，它似乎按预期工作。有什么方法可以配置serve -s build为从 /myapp 目录提供页面吗？

该应用程序目前只有一页，没有链接，也没有实现 react-router 或任何等效的东西。该团队一直在使用 webpack，但将其删除。该应用程序使用 react-scripts 进行捆绑。

使用create-react-appwith react-scripts-ts与TypeScript 一起使用时，运行带有--coverage标志的测试会导致错误的覆盖率报告。有什么方法可以整合ts-jest，以便覆盖率报告准确无误？

下面是我在开玩笑的配置package.json：

"jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "mapCoverage": true,
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }
}

编辑：这是我收到的错误消息：

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported …

我正在通过反应脚本使用 webpack 开发服务器，并且我想使用它通过 Visual Studio Code 提供的调试功能，但是，我有一个非标准设置。我们在 webpack 开发服务器前面有服务，它代理所有请求，将请求与其他服务捆绑在一起，处理安全性等。所以在本地开发中，我打开 localhost:8080，它将所有请求转发到 localhost:8084，它是 webpack 服务器。但是，该服务（在 8080 上）不支持 websocket，因此无法转发它们。我看到 webpack 尝试回退到 iFrame，它适用于重新加载，但似乎不适用于调试。

有没有办法让我明确告诉 webpack 它应该在端口 8084 上连接到 webpack 开发服务器，而不是尝试通过 8080 来连接？我已经使用了我已经PORT=8084 cross-env REACT_APP_VERSION=$npm_package_version react-scripts start在 package.json 中使用的，我认为它通过了端口。但是，问题在于套接字始终对您正在运行的同一主机/端口打开。因此，当我的页面被代理到 时:8080，也尝试打开套接字:8080。我想要的是明确告诉它不要使用8080，但是8084.

其次，通过 iFrame 备份选项无法进行调试是正确的吗？

我正在将 reduxsauce 库用于 redux 存储，并且我想对其中的单个 redux 存储进行单元测试。Redux 文件：

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

const { Types, Creators } = createActions({
  getLanguage: [],
  setLanguage: ['language']
})

export const LanguageTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  language: "en"
})

/* ------------- Reducers ------------- */


export const getLanguage = (state: Object, {}: Object) => {
    return state.merge({})
}

export …

首先，我将给出问题的一些背景。

我正在开发一个 npm 库。在项目文件夹中，我有另一个名为“example”的文件夹，用于测试库。结构如下所示。

|- node_modules/
|- src/ 
|- example/
|   |- node_modules/
|   |- src/
|   |- package.json
|- package.json 

根 package.json 具有依赖项babel-jest。example/package.json 具有依赖项react-scripts。react-scripts start在示例目录中运行时，会出现以下错误，

据我所知，这是因为 example/ 目录中的 package.json 继承了（不确定这是否正确）根 package.json 的依赖项。

也就是说，我可以使用安装在根 package.json 中的依赖项，在 example/ 的 src/ 里面，这在某些情况下很方便。但这对我的用例来说是一个障碍。

我怎样才能防止这种行为？（不改变目录结构）

谢谢你。

我正在测试使用ag-grid的组件，但是测试套件在导入其许可证时失败，并且与被测试的组件无关。

import React from 'react';
import RelatorioVendas from './RelatorioVendas';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// tslint:disable-next-line:no-any
configure({ adapter: new Adapter() });

test('renders the "RelatorioVendas" component.', () => {
    const wrapper = shallow(
        <RelatorioVendas/>
    );
    wrapper.simulate("gridReady");
    expect(wrapper).toMatchSnapshot();
});

错误：

src/routes/Dashboard/RelatorioVendas.test.js
  ? Test suite failed to run

    TypeError: Cannot read property 'measureText' of null

      35 | import ValidationService from '../../services/ValidationService';
      36 |
    > 37 | import { LicenseManager } from "ag-grid-enterprise";
         | ^
      38 …

我已经弹出了反应脚本，并且我的 setupProxy.js 中有以下内容。

module.exports = function(app) {
  app.use(
   proxy({
    changeOrigin: true,
    logLevel: "debug",
    onProxyReq: function onProxyReq(proxyReq, req, res) {
    console.log(
      chalk.red(
        'Request'
      )
    );
  },
  onError(err, req, res) {
   console.log(err);
  },
  secure: false,
  target: "http://www.google.com"
})

我希望上面的内容能够代理，并记录从反应应用程序发出的每个请求，但事实并非如此。我需要在 Webpack 中添加配置吗？谢谢

我有一个反应应用程序。在我的package.json：

"build": "react-scripts build",

运行此构建脚本后：

npm run build

所有内容都内置到该build文件夹​​中，并且该文件夹中的所有文件public都会按原样复制到该文件夹​​的根目录build（未缩小为块）。因此，我想要复制而不更改的任何静态文件都可以放入该public文件夹中。

我想复制一个文件，就好像它在该public文件夹中一样，但来自不同的文件夹，例如/src/files/config.js

最好的方法是什么？是否类似于将 a 添加webpack.config.js到我的应用程序的根目录并具有用于发送这样的文件的自定义配置？或者也许只是以某种方式快速修改 npm 脚本package.json？或者我错过了什么...

谢谢

我有一个使用 Create React App 启动的应用程序，因此npm run build运行react-scripts build. 我最近安装了prettier，因此.eslintrc.json在项目根目录中添加了一个文件来加载插件prettier。npm run build在本地按预期工作，但是，当将应用程序部署到 Heroku 时，npm run build尝试运行 ESLint 并失败，因为插件devDependencies不是dependencies.

Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'

从之前与类似问题的争论中，我知道我可以NPM_CONFIG_PRODUCTION=false在 Heroku 中进行设置，以便它能够安装devDependencies，这实际上确实解决了部署问题。尽管如此，我很想知道是否有另一种不需要设置的解决方案NPM_CONFIG_PRODUCTION=false。

在这种情况下是否可以npm run build完全阻止运行 ESLint 或阻止它尝试访问 中指定的插件.eslintrc.json？我承认添加.eslintrc.json是.gitignore一种解决方案，但我希望在我的存储库中添加 ESLint 配置。

我升级到react-scripts v5，并且收到以下错误：

这是我的导入基于Swiper 文档的样子：

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';