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

IT技术 reactjs create-react-app react-scripts
2021-04-20 09:29:41

我想知道是否可以使用react-script重命名srcapp文件夹之类的其他内容

6个回答

您可以使用react-app-rewired来覆盖react路径配置。就我而言,我可以更改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;
    },
}
对于使用 的任何人customize-cra,您仍然必须做同样的事情。参见:github.com/goblin-laboratory/cra-multi-page-template/blob/...
2021-06-08 09:29:41
对我来说,我还必须添加以下路径 paths.appTypeDeclarations = path.resolve(__dirname, 'ui/typings');
2021-06-21 09:29:41

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

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

  1. 运行npm run eject这从 create-react-app 公开了一些内部配置内容
  2. 打开package.json和编辑在各自的正则表达式jest.collectCoverageFrom,并jest.testMatch以符合您的测试路径
  3. 改变的路径appSrcappIndexJs并且testsSetup将在config/paths.js文件
我这样做了却没有做npm run eject,但它确实有效,所以该命令的真正目的是什么,是否相关?
2021-06-05 09:29:41
这就是 glennreyes 在他对这个问题的评论中提到的
2021-06-06 09:29:41

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

/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。

希望这有帮助。

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

具体来说:

    return {
      src: paths.appSrc,
    };

需要改为

    return {
      newSrcName: paths.appSrc,
    };

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