機械音痴な情報系

エラーの解決方法とTips

【React】package.json、yarn.lock、とかwebpackとか

package.jsonとyarn

Reactを使う際に最初に色々インストールして設定ファイルが作られてるけど何やってんのかわかってない。

yarn(ヤーン)はパッケージマネージャー。以下コマンドでインストール。

$ brew install yarn
$ yarn --version

yarnではpackage.jsonに必要なファイルを記述してそこから色々インストールする。 では、まず以下のコマンドでpackage.jsonのテンプレートを作成する nameとversionはまずはEnterを押してスキップ。

$ yarn init 

パッケージは直接このファイルに書いていくのではなくて、以下のコマンドを使うと追加と、jsonへの記述を同時に行ってくれる。

$ yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015
コマンド 役割
webpack webpack-dev-server ローカルでdevサーバーを動かすために使う
babel-core、babel-loader、babel-preset-es2015 ES2015をコンパイルするバベル関連のパッケージ
babel-preset-react Reactをコンパイルする

package.jsonにdependenciesという項目、yarn.lockというファイルが追加されている。 yarn.lockにはパッケージ情報が書いてある(メジャーバージョン.マイナーバージョン.パッチバージョン)。 頭の「^」はそのメジャーバージョンの最新という意味 「"babel-core": "^6.25.0",」の場合6系の最新がインストールされている。 package.jsonだとインストールの環境や、時期によって入るバージョンが変わってしまう。 そこでyarn.lock。 これでバージョンを完全にしていしているので環境や時期によるバージョンの違いはなくなる。

そしてnode_modulesディレクトリに実際のライブラリが入っている。 やたら多いのは、それぞれに依存しているものも入っているので。 ここは通常.gitignoreさせる。

まとめ

  1. yarn addでライブラリをダウンロード。
  2. 同時にpackage.jsonにバージョンを記述。
  3. 同時にyarn.lockを作成することでバージョンを固定する(環境、時期によるバージョンの違いをなくす)。
  4. インストールされたものはnode_modulesディレクトリに格納されている。

yarn.lockが作成されるまで

  1. yarn addでライブラリをダウンロード。
  2. 同時にpackage.jsonにバージョンを記述。
  3. 同時にyarn.lockを作成することでバージョンを固定する(環境、時期によるバージョンの違いをなくす)。
  4. インストールされたものはnode_modulesディレクトリに格納されている。

webpack.config.jsの中身について

ついでにconfigの中身をメモっとく。

var publidDir = __dirname + '/public';
module.exports = {
  // コンパイル対象のファイル
  entry: [
    './src/index.js'
  ],
  // コンパイルしたものの吐き出し先
  output: {
    path: publidDir,
    publicPath: '/',
    filename: 'bundle.js'
  },
  // どのライブラリを使ってコンパイルするか
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015']
      }
    }]
  },
  // entryからインポートされたライブラリを検索する拡張子を指定
  resolve: {
    extensions: ['.js', '.jsx']
  },
  // webpack-dev-serverの設定
  devServer: {
    historyApiFallback: true,
    contentBase: publidDir // ドキュメントルート
  }
};

devserverを起動

public/index.html作成

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/bundle.css">
  </head>
  <body>
    <h1>Hello</h1>
  </body>
  <script src="/bundle.js" charset="utf-8"></script>
</html>

実際にはシムリンクになっている

$ ls ./node_modules/.bin/webpack-dev-server
./node_modules/.bin/webpack-dev-server -> ../webpack-dev-server/bin/webpack-dev-server.js*

実際にはjsファイルを参照している。 以下ファイルで実行。

$ ./node_modules/.bin/webpack-dev-server

このコマンドは長いので、スクリプトとしてpackage.jsonに登録する。

"scripts": {
    "start": "./node_modules/.bin/webpack-dev-server"
  },

これによって以下のコマンドで立ち上げが可能になる。

$ yarn run start

まとめ

  1. devserverでローカルにサーバー立ち上げ
  2. public/index.htmlがロードされる
  3. index.htmlのbundle.jsはwebpack.configのoutputのpuclicPathを参照している。この下のfilename(bundle。js)にアクセスがあれば、entry(src/index.js)をコンパイルした結果を返す。

実際にoutputを見るにはsrc/index.jsを以下コマンドでコンパイルする。

$ ./node_modules/.bin/webpack

そうするとpublicフォルダにbundle.jsが生成される。 これもgitignoreしとく。