react.jsを使うための環境構築　エラーの対処

jintareact

使用OS : MAC v10.13.6

reactを使うために、

  • node.jsをインストールする必要がある
  • babel,webpacなどのライブラリが必要 —- create-react-app使えば簡単
  • JavaScriptES2015(ES6)で書く必要がある

手動で環境構築するために

node.jsをインストール

npmをインストール yarn でも良い

  • node.js -vでバージョン確認　：　今回はv12系
  • npm, gulpもバージョン確認　：　npm:v6系, gulp:v4系

ここで、node.jsとgulpのバージョンが古いものと新しいものだとうまく動作しない。

nodeがv12系なら、gulpを4系に更新する必要がある。

また、gulp v4系だと、3系とgulpfile.jsの書き方が違ってくるので注意。

npm init でpackage.jasonを作成。

インストールしたパッケージがこちら。（削除したものも全て。このままだとエラーが出ます。）

jsをバンドルしたい時、buildをする。

gulpを使いたいので、

gulp.webpack.jsを作る。

gulp v4系では、オブジェクト指向で書いて、

  • 明示的にtaskを終了する return
  • callbackを呼び出す done()
  • streamを返却する return
  • 単にreturnをつける return
のどれかをする必要がある。

このファイルでは、importを使いパッケージを読み込み、gulp.taskで使いたいタスクを書く。

buildをする時、gulp buildか、npm run buildを使うが、
この時、起こったエラーを挙げて、対処方法を書いていく。

Error: Entry module not found

作ったgulpファイルをもとに、gulp task名で実行すると、以上のエラーが出た。

これは、webpack.config.jsのentryの部分の書き方が悪かった。


以上のように修正

configuration[0].module has an unknown property ‘loaders’.

loadersプロパティを知らないと言われた。
loadersは,webpack.config.jsのmodule部分にある。。

webpack 4では、loaders -> rules にする必要がある。

WARNING in configuration The ‘mode’ option has not been set.Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

これも、webpack 4にしたことで、オプションのmodeをつけろと言われる。

これは,package.jsonのファイルのscript部分に以下を追加。

"scripts": {
  "start": "webpack-dev-server --mode development --open"
},

//もしくは、webpack.config.jsに
module.exports = {mode: 'development'};
を追加する。

//それでもダメなら、
gulpやnpmでタスクを実行するときに、一緒に gulp build --mode=development　とコマンドを打つ。

それでも出てくると、ちょっとわからない。

参考：https://qiita.com/shota_abe/items/fbd6d988188442a4d11c

Error: Cannot find module ‘@babel/core’

これは、@babel/coreのモジュール（パッケージ）が見つからないということ。

単純に、@babel/coreをinstallすれば良いだけだが、これでも問題が起こる。

下記参照

DeprecationWarning: Using a domain property in MakeCallback is deprecated. 

重複エラー：重複してプロパティを使っているということ。

すでにあるpackage.jsonの中には、すでに、babel-coreのパッケージがあるため、@babel/core を落とすと、重複エラーが出てしまう。

Plugin/Preset files are not allowed to export objects, only functions.

これは、プリセットがエクスポートするのに使えないということ。

調べてみると、”@babel/preset-env”　をインストールすると良いらしいが、

すでに、babel-preset-env　を落としているので、また、重複エラーが出てしまう。

一度、babel-preset-env　を削除してみたが、package.lock.jsonの方で、ファイルを参照しているようなので、ファイルがないとエラーが出てしまう。

Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”.

これは、babelバージョン７を要求しているが、バージョン６でロードされているということ、

babelの最新は6.26.3なので問題なく、babel-loderのバージョンに問題がある。

さらに、babel-coreのバージョンも問題であることがわかった。

最終的にどうしたのか。。。

babel-loaderのバージョンによる。
  • babel-loader:7.x.xの場合、babel-coreを落とす。プリセットは、babel-preset-envでいい。
  • babel-loader:8.x.xの場合、@babel/coreを落とす。この場合、プリセットは、@babel/preset-envの方がいいだろう・・・

“参考　：　https://github.com/FormidableLabs/spectacle/issues/522

今回は、package.jsonを用意していたので、npm installで、package.lock.jsonも一緒に作成された。

package.lock.jsonのなかで、どのパッケージとどのパッケージが関連しているのか、呼び出しているのかそれを確認することで、必要なパッケージがわかる。

1つ1つ手動でインストールする場合も、バージョンの互換性の確認は必要である。

  • webpack-cliは、コマンドラインからwebpackを実行するためのパッケージ。これも、requireされたことがあるが、必要なのか疑問。。。。
  • node_modules\babelify配下に「README.md」というファイルがあるので、そちらも参考にした方がいい。