35

I'd like to know if it's possible using react-script to rename src to something else like app folder

4

7 回答 7

26

您可以使用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;
    },
}
于 2019-02-11T07:34:24.243 回答
3

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

我通过执行以下操作使其工作：

  1. 运行npm run eject。这暴露了 create-react-app 中的一些内部配置内容
  2. 打开package.json并编辑相应的正则表达式jest.collectCoverageFrom并jest.testMatch匹配您的测试路径
  3. 更改文件appSrc中appIndexJs和testsSetup的路径config/paths.js
于 2018-04-25T08:34:08.027 回答
1

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

/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 run serve 来提供开发版本。

我正在使用 node 和 express，所以要运行 Reactjs 的生产版本，我可以在 /root 中 npm run 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。

希望这会有所帮助。

于 2018-01-03T06:03:28.883 回答
0

这是一个很好的问题，更改此文件夹名称的有效方案是在将旧的 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",

于 2021-02-01T13:03:49.460 回答
0

T0astBread 的答案几乎是完美的，但是他在 modules.js 中错过了对“src”的额外引用。

具体来说：

    return {
      src: paths.appSrc,
    };

需要改为

    return {
      newSrcName: paths.appSrc,
    };
于 2020-07-31T22:18:13.710 回答
-1

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

ln -s ./src/ ./app

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

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

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

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

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

于 2018-04-18T00:19:19.760 回答
-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');
});

于 2017-09-20T13:20:50.927 回答