npm run ejectによる実行前と実行後差分の違いをまとめる

[syunto07ka]

rel #12 #22

[piro0919]

https://create-react-app.dev/docs/alternatives-to-ejecting/ https://create-react-app.dev/docs/available-scripts/#npm-run-eject

昔はwebpack周りの設定を触りたいときなどはejectするしかなかったんですが、最近は上書けるようになったみたいなので、ejectはほぼ不要みたいですね。

[piro0919]

@Syunto07ka このissue、優先度が高いほうが良いですね かきいさんなりにまとめてみてくださいな 👍

[syunto07ka]

骨が折れそう。。 明日答えていきます！

[piro0919]

@Syunto07ka

ざっくりでいいですよ 最初から全部が全部把握するなんて100%無理ですし、自分もまだ把握しきれてない箇所多いので 😆

いくつかポイントを挙げるので、確認できたらcloseでいいんじゃないでしょうか 👍

1. eject を実行する意味、必要性

   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

   これを訳してみてくださいな 👍

2. configとscriptsフォルダに格納されているファイルの意味を、ざっくり書き出してみてくださいな

[syunto07ka]

https://github.com/Syunto07ka/jewelry_box/issues/12#issuecomment-607623682 ejectしたときのログ

kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$ npm run eject

> jewelry_box@0.1.0 eject /Users/syunto/development/jewelry_box
> react-scripts eject

NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into /Users/syunto/development/jewelry_box
  Adding /config/env.js to the project
  Adding /config/getHttpsConfig.js to the project
  Adding /config/modules.js to the project
  Adding /config/paths.js to the project
  Adding /config/pnpTs.js to the project
  Adding /config/webpack.config.js to the project
  Adding /config/webpackDevServer.config.js to the project
  Adding /config/jest/cssTransform.js to the project
  Adding /config/jest/fileTransform.js to the project
  Adding /scripts/build.js to the project
  Adding /scripts/start.js to the project
  Adding /scripts/test.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @svgr/webpack to dependencies
  Adding @typescript-eslint/eslint-plugin to dependencies
  Adding @typescript-eslint/parser to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding eslint-plugin-react-hooks to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding jest to dependencies
  Adding jest-environment-jsdom-fourteen to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding optimize-css-assets-webpack-plugin to dependencies
  Adding pnp-webpack-plugin to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding postcss-safe-parser to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding resolve-url-loader to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding style-loader to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding ts-pnp to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset

Running npm install...
updated 1 package and audited 930919 packages in 11.65s

56 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Ejected successfully!

Staged ejected files for commit.

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.13.6 → 6.14.4       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.4   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

kakiishuntsutomunoMacBook-Pro:jewelry_box syunto$

[syunto07ka]

1. 英文訳

Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

このツール(react-scriptかな？)を除いて、ビルドの依存関係と設定ファイルとスクリプトをディレクトリーにコピーする。これをすると、後戻りできなくなります。

---

ejectしたときのログをみると、言葉通りのことが行われてそう

[syunto07ka]

2. configとscriptsフォルダに格納されているファイルの意味を、ざっくり書き出してみてくださいな

config

jest

テストの際に使用するプラグイン(jest)の設定ファイルを置くフォルダ？

env

クライアントの環境をリクエストurlから取得する関数のexportを行っている。 ので、現在のサーバー環境の情報をセットして返すファイル？

getHttpsConfig

Httpsで通信するときの設定を返すファイル。おそらくこの記事に書かれている内容っぽい

[Node.jsでhttps通信をするときに中間証明書を指定する方法] https://sublimer.hatenablog.com/entry/2016/12/13/000000

modules

tsconfig(jsconfig)を読み込んで、どうコンパイルするかの設定を返すファイル

paths

パス設定を返すファイル

pnpTs

webpackでコンパイルする際のプラグイン(pnp)の設定？

https://www.npmjs.com/package/ts-pnp

webpack.config

tsx, ts, cssなどのファイルをコンパイルするための設定

webpackDevServer.config

npm run startの際に使用するwebpackのdevServerの設定

script

build

webpackでコンパイルしたファイルを生成して、build/配下に配置する

start

webpackDevServerでコンパイルしたファイルを表示

test

テストコードの実行(jestが行っている)

[syunto07ka]

@piro0919 ↑こんな感じでどうでしょうか？

[piro0919]

@Syunto07ka

あとで確認しまーす

[syunto07ka]

@piro0919

いくつかポイントを挙げるので、確認できたらcloseでいいんじゃないでしょうか 👍

ともあるので、閉じちゃいますね。 なにかあれば以下にコメントいただければとmm

[piro0919]

@Syunto07ka

すいません忘れてました。 🙇

とはいえ、内容問題なさそうですー。