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

Question

我想知道是否可以使用react-script重命名src为app文件夹等其他内容

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

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

我正在使用 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。

希望这有帮助。

Answer 3

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.js包含以下内容的文件：

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！

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

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

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