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

Question

我想知道是否可以使用 react-script 将 src 重命名为其他名称，例如 app 文件夹

Answer 1

在项目的根目录中创建文件，插入此代码并运行。

const fs = require('fs');
const path = './node_modules/react-scripts/config/paths.js';
const folder = 'app';

fs.readFile(path, 'utf8', (err, data) => {
 if (err) throw err;
 data = data.replace(/src/g, folder);
 fs.writeFile(path, data, 'utf8');
});

Answer 2

不确定这是否能回答您的问题，但我会试一试。我的目录结构如下所示：

/root
--/app
----/build
----/public
------index.html
----/src
------index.js
app.js
package.js

我的/root/package.json里面有这个：

  "scripts": {
    "build": "cd app && npm run build",
    "start": "node app.js",
    "serve": "cd app && npm run start"
  },
  "dependencies": {
    "express": "^4.8.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17"
  },

我的 /root/app/package.json 看起来像这样：

  "scripts": {
    "build": "react-scripts build",
    "start": "set PORT=3000 && react-scripts start"
  },
  "dependencies": {
    "react-scripts": "^1.0.17"
  }

对于运行 Reactjs 的开发版本，在 /root 中我可以 npm 运行服务来提供开发版本。

我正在使用 node 和 express，所以运行 Reactjs 的生产版本，在 /root 中，我可以 npm 运行 build 来创建 /root/app/build 目录。我有一个看起来像这样的路由器：

var options = {root : config.siteRoot + '/app/build'};

mainRte.all('/', function(req, res) {
    console.log('In mainRte.all Root');
    res.sendFile('index.html', options);
});

所以当我运行 /root/app.js 在节点中浏览到“/”时，它会打开 /root/app/public/index.html 然后/root/app/index.js.

希望对您有所帮助。

Answer 3

也许象征性的 link 可以解决您想要这样做的原因：

ln -s ./src/ ./app

src 文件夹将保留，但您可以像使用 app 文件夹一样使用它。

如果你像我一样使用 vscode，你也可以这样做：

Cmd-shift-p 搜索工作区设置，并添加以下内容：

{
  "files.exclude": {
      "src/": true
  }
}

您可以对其他编辑进行类似的操作

Answer 4

我知道这是一个老问题，但我仍然会 post 我的解决方案，因为它可能会对某人有所帮助。

我通过执行以下操作让它工作：

运行npm run eject。这暴露了一些来自 create-react-app
打开 package.json 并编辑 jest.collectCoverageFrom 和 jest.testMatch 下的相应正则表达式以匹配您的测试路径
更改 appSrc、appIndexJs 和 testsSetup 在 config/paths.js 文件中的路径

Answer 5

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

中的路径

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;
    },
}

Answer 6

T0astBread 的回答近乎完美，但他在 modules.js.

中遗漏了对“src”的额外引用

具体来说：

    return {
      src: paths.appSrc,
    };

需要改为

    return {
      newSrcName: paths.appSrc,
    };

Answer 7

这是一个很好的问题，更改此文件夹名称的有效场景是在将旧的 React 项目迁移到 CRA 时。

这是我发现破坏较少的另一种方法：

创建符号链接：

ls -s ./app src

然后在 config-overrides.js 中添加这个以允许 webpack 处理符号链接：

module.exports = (config, ...rest) => {
    return { ...config, resolve: { ...config.resolve, symlinks: false } };
};

然后安装 react-app-rewired 并将其添加到您的 package.json:

"start": "react-app-rewired start",

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

How do I change `src` folder to something else in create-react-app

reactjs

react-scripts

create-react-app