Question

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

等其他内容

Answer 1

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

我通过以下方式开展工作：

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

Answer 2

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

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 3

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

/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我可以只运行构建来创建/ 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 4

也许符号链接可能会解决您想要这样做的原因：

ln -s ./src/ ./app

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

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

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

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

你可以和其他编辑一样

Answer 5

您可以使用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;
    },
}

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`文件夹更改为其他内容

7 个答案: