web-dev-qa-db-ja.com

create-react-appで `src`フォルダを別のものに変更するにはどうすればよいですか

react-scriptを使用してsrcの名前をappフォルダーなどに変更できるかどうかを知りたい

reactjscreate-react-appreact-scripts
19
rstormsf

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;
    },
}
3
Cong Dan Luong

これは古い質問ですが、誰かに役立つかもしれないので、解決策を投稿します。

私は次のことをしてそれを機能させました：

  1. npm run ejectを実行します。これにより、create-react-appからいくつかの内部構成が公開されます。
  2. package.jsonを開き、jest.collectCoverageFromおよびjest.testMatchの下のそれぞれの正規表現を編集して、テストパスに一致させます
  3. config/paths.jsファイルのappSrc、appIndexJsおよびtestsSetupのパスを変更します
3
T0astBread

これがあなたの質問に答えるかどうかはわかりませんが、試してみます。私のディレクトリ構造は次のようになります。

/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を実行するだけでdevバージョンを提供できます。

NodeとExpressを使用しているため、Reactjsの製品版を実行するには、/ rootでnpmを実行して/ 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が開きます。

うまくいけばそれが助けになる。

1
Joe Shmoe

プロジェクトのルートにファイルを作成し、このコードを挿入して実行します。

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');
});
0
IT VLOG

おそらくシンボリックリンクは、これをしたいあなたの理由に対処するかもしれません：

ln -s ./src/ ./app

srcフォルダーは残りますが、appフォルダーであるかのように作業できます。

私のようにvscodeを使用している場合は、次のこともできます。

Cmd-shift-pワークスペース設定を検索し、次を追加します。

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

他のエディターでも同様にできます

0
Dan