让webpack和CRA在监视模式下输出文件

Question

我正在尝试让CRA的start脚本在更改时发出文件，而不是将它们保留在内存中。

我正在实现Google Chrome扩展程序，因此需要将文件刷新到文件系统中，以便Chrome可以获取它们。而构建每个更改并不像自动编译那样方便。

我已经尝试使用react-app-rewired来覆盖webpack配置中的一堆属性，包括mode、watch和查看'output.path'，但迄今为止没有成功。

或者CRA的“start”脚本永远不会发出底层文件，因为加载器没有调整好？

感谢您的帮助！

- Jurijs Kovzels

Answer 1

我知道这个问题已经有答案了，而且几个月前这也适用于我

但最近我开始了一个新项目，在这个项目中我想把一个React应用程序与Express相结合，我试图使用同样的设置，突然出现了下面的错误:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'writeToDisk'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 1.

因为这个QA当时帮了我，所以我决定将我找到的解决方法分享给那些未来遇到同样问题的人。

解决方案

似乎webpack配置中的"devserver"结构发生了一些变化，您可以在这里找到详细信息：https://webpack.js.org/configuration/dev-server/

现在无法直接使用writeToDisk，而是需要将其放入devMiddleware对象中，就像下面这样:

    module.exports = {
        devServer: {
            devMiddleware: {
                writeToDisk: true,
            },
        },
        //...
    }

我正在使用：craco: ^6.4.3

希望这能帮助到和我面临相同问题的人。

- Mehdi Amenein

Answer 2

你可能需要CRACO。

创建React应用程序配置覆盖是针对create-react-app的一种简单易懂的配置层。

$ npm install @craco/craco --save

在根目录下创建一个名为craco.config.js的文件，并配置CRACO：

my-app
├── node_modules
├── craco.config.js
└── package.json

更新 package.json：

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

最后，编辑craco.config.js文件：

module.exports = {
  devServer: (devServerConfig) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
};

- weiliang

---

谢谢，我尝试使用craco，但是我已经尝试了相同的想法，使用react-app-rewired，但它并没有完全起作用。 - Jurijs Kovzels

它没有成功。CRA启动脚本就是不想做一些构建脚本所做的事情。最终，我取消了CRA，并从头开始构建我的项目。这样更能控制正在发生的事情，我也可以随时查看CRA以选择好的部分。 - Jurijs Kovzels

我通过使用直接配置（https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#direct-configuration-object-literal）使其正常工作。 - Jan Aagaard

这应该被标记为正确答案。 - Benjam