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させる。

まとめ

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

yarn.lockが作成されるまで

yarn addでライブラリをダウンロード。
同時にpackage.jsonにバージョンを記述。
同時にyarn.lockを作成することでバージョンを固定する(環境、時期によるバージョンの違いをなくす)。
インストールされたものは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

まとめ

devserverでローカルにサーバー立ち上げ
public/index.htmlがロードされる
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しとく。

機械音痴な情報系

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

package.jsonとyarn

まとめ

yarn.lockが作成されるまで

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

devserverを起動

まとめ