如何在 create-react-app 中将 \`src\` 文件夹更改为其他内容

Question

我想知道是否可以使用 react-script 将 src 重命名为 app 文件夹

原文由 rstormsf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 react-app-rewired 覆盖反应路径配置。就我而言，我可以更改 config-overrides.js 文件中的路径

const path = require('path');

module.exports = {
    paths: function (paths, env) {
        paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js');
        paths.appSrc = path.resolve(__dirname, 'mysrc');
        return paths;
    },
}

原文由 Cong Dan Luong 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

react-app-rewired 允许这种精确的定制。

1个

安装 react-app-rewired 作为开发依赖：

 npm install --save-dev react-app-rewired

2个

在 package.json 中，更改这些行

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

到

"scripts": {
    "react-start": "react-app-rewired start",
    "react-build": "react-app-rewired build",
    "react-test": "react-app-rewired test",
    ...
}

3个

在项目根目录中创建一个 config-overrides.json 文件，内容如下：

 const paths = require('react-scripts/config/paths')
const path = require('path')

// Make the "app" folder be treated as the "src" folder
paths.appSrc = path.resolve(__dirname, 'app')
// Tell the app that "src/index.js" has moved to "app/index.js"
paths.appIndexJs = path.resolve(__dirname, 'app/index.js')

现在你的 app 文件夹是新的 src ！

---

您还可以自定义许多其他内容，例如“公共”文件夹的名称：

 paths.appPublic = path.resolve(__dirname, 'subfolder/public')
paths.appHtml = path.resolve(__dirname, 'subfolder/public/index.html')

您还可以更改 package.json 和 node_modules 的位置。请参阅 此处 以获取完整列表。

原文由 McKinley 发布，翻译遵循 CC BY-SA 4.0 许可协议