Q&A
src フォルダの内容はトランスパイルおよびバンドル処理されて、build/static/js や css フォルダの中に生成されてると思いますけど…。
前提・実現したいこと
React環境でnpm run buildを実行した結果、buildフォルダに生成されるファイルをsrcフォルダ以下の内容にしたいです。
発生している問題・エラーメッセージ
publicフォルダ内の内容しか出力されず困っています。
ファイル構成
node_modulesの中身は省いています。
C:. │ .eslintcache │ .gitignore │ package-lock.json │ package.json │ README.md │ ├─.vs │ │ ProjectSettings.json │ │ slnx.sqlite │ │ │ └─test-react-build │ └─v16 │ .suo │ ├─build │ │ asset-manifest.json │ │ index.html │ │ │ └─static │ ├─css │ │ main.6dea0f05.chunk.css │ │ main.6dea0f05.chunk.css.map │ │ │ └─js │ 2.ae451677.chunk.js │ 2.ae451677.chunk.js.LICENSE.txt │ 2.ae451677.chunk.js.map │ 3.f577b492.chunk.js │ 3.f577b492.chunk.js.map │ main.c56f0cdf.chunk.js │ main.c56f0cdf.chunk.js.map │ runtime-main.028ed18d.js │ runtime-main.028ed18d.js.map │ ├─node_modules ├─public │ index.html │ └─src App.js index.css index.js reportWebVitals.js setupTests.js
該当のソースコード
package.json
JSON
1{ 2 "name": "test-react-build", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "@testing-library/jest-dom": "^5.11.9", 7 "@testing-library/react": "^11.2.3", 8 "@testing-library/user-event": "^12.6.2", 9 "react": "^17.0.1", 10 "react-dom": "^17.0.1", 11 "react-scripts": "4.0.1", 12 "web-vitals": "^0.2.4" 13 }, 14 "scripts": { 15 "start": "react-scripts start", 16 "build": "react-scripts build", 17 "test": "react-scripts test", 18 "eject": "react-scripts eject" 19 }, 20 "eslintConfig": { 21 "extends": [ 22 "react-app", 23 "react-app/jest" 24 ] 25 }, 26 "browserslist": { 27 "production": [ 28 ">0.2%", 29 "not dead", 30 "not op_mini all" 31 ], 32 "development": [ 33 "last 1 chrome version", 34 "last 1 firefox version", 35 "last 1 safari version" 36 ] 37 } 38} 39
public/index.html
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>React Build Test App</title> 7</head> 8<body> 9 <div id="root"> 10 <!-- ここが表示されていたらビルド失敗しています。 --> 11 </div> 12</body> 13</html> 14 15
src/App.js
JavaScript
1import React from "react"; 2 3export default class App extends React.Component { 4 render() { 5 return ( 6 <div style={{ textAlign: "center" }}> 7 <p>React Build Test Success!</p> 8 </div> 9 ); 10 } 11} 12 13
src/index.css
CSS
1body { 2 margin: 0; 3 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 -webkit-font-smoothing: antialiased; 5 -moz-osx-font-smoothing: grayscale; 6} 7 8code { 9 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10} 11
src/index.js
JavaScript
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import './index.css'; 4import App from './App'; 5import reportWebVitals from './reportWebVitals'; 6 7ReactDOM.render( 8 <React.StrictMode> 9 <App /> 10 </React.StrictMode>, 11 document.getElementById('root') 12); 13 14reportWebVitals(); 15
試したこと
WebpackDevServerというのが関わっているというところまでは調べたのですが、ReactもnpmもJavaScriptも初心者でちんぷんかんぷんでした。
なるほど、書いたコードとは全然違ったものが入っていると思っていたのですが、トランスパイルで別言語になっていたのですね。どうやって呼び出したらいいんでしょうか？
生成された build フォルダの内容をそのまま公開して、ブラウザで index.html を開けば良いかと。
それだとpublic以下の内容しか表示されてないのです。
えっと、そのプロジェクトは create-react-app したものですよね？
npm start したらどうなりますか？
はいcreate-react-appで作製しました。
npm startするとpublic以下の内容は表示されず、想定通りsrc以下の内容が表示されます。
build の中身をどうやってブラウザで開いてますか？ ファイルを直接開くとうまく表示されないので、Web サーバーに乗せる必要がありますよ。
ローカルサーバーでhttp://localhost:4000/index.jsを叩くとhttp://localhost:4000/index.htmlに飛ばされます。
index.js をブラウザで開いて何がしたいのでしょうか？ (そもそもそんなファイルないですよね…。)
src以下にはindex.jsがあり、そのファイルをrootに構成していたので・・・。
ただなんかもう一度ローカルサーバーでhttp://localhost:4000/index.js叩いてみたところ何故かうまく表示できてしまいました。原因不明ですが、一応解決しました。
解決したならそれで構いませんが、普通は js ファイルは直接表示するものではないと思います…。
自己解決
