LoginSignup
11
18

More than 5 years have passed since last update.

@takuyanin(Takuya Furukawa)

Reactを始める前に環境を整えよう/「npm/yarn」両者対応

Last updated at Posted at 2018-11-20

はじめに

Reactをアプリに導入するにあたって、npm, yarn二つのパッケージマネージャどちらを使うかで迷うこともあるかと思います。
しかし、どちらも環境にいれておいて損はないので、それぞれ、環境構築を順を追ってご説明します。

npm編

nvmのインストール

最初に NVM をインストールします。 NVM はただの bash スクリプトであり、スクリプトをダウンロードして、bashに与えることで、インストールできます。インストールしたら、ターミナルを起動し直すか、下記のように、sourceコマンドで設定を読み直します。

*NVM はNode Version Managerの略であり、　Node.js　の高機能なパッケージマネージャです。

スクリプトをダウンロード

まずは curl コマンドを実行しましょう。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 11388  100 11388    0     0  31685      0 --:--:-- --:--:-- --:--:-- 31810
=> Downloading nvm from git to '/Users/takuyanin/.nvm'
=> Cloning into '/Users/takuyanin/.nvm'...
remote: Enumerating objects: 18, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 7250 (delta 8), reused 11 (delta 4), pack-reused 7232
Receiving objects: 100% (7250/7250), 2.27 MiB | 2.15 MiB/s, done.
Resolving deltas: 100% (4562/4562), done.
* (HEAD detached at v0.33.1)
  master
=> Compressing and cleaning up git repository
Counting objects: 7250, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7196/7196), done.
Writing objects: 100% (7250/7250), done.
Total 7250 (delta 4836), reused 2198 (delta 0)

=> nvm source string already in /Users/takuyanin/.bashrc
=> bash_completion source string already in /Users/takuyanin/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

curl コマンドに o オプションをつけると出力先を指定することができます。
よって、curl -o ファイル名で出力先ファイルを指定することができますが、下記のコマンドはcurl -o-となっております。「-o」とファイル名の間には半角空白を入れても入れなくてもOKですので、-o-の末尾「-」はファイル名ということになります。
この場合、curlでは「-」は標準出力を表しますので、パイプ処理（| bash）によって、bashの入力を行なっております。

*Linuxのパイプラインとは、複数のコマンドを組み合わせて使うための手段です。パイプは|のことを指してまして、パイプによっていくつものコマンドを組み合わせて複雑な処理ができるようになります。

*bashは、標準入力やファイルから読み込んだコマンドを実行する、sh互換のコマンド言語インタプリタです。

次に、.bashrcファイルに追記された設定を反映させるために下記のコマンドを実行します。

$ source ~/.bashrc

node.jsのインストール

先ほどの curl コマンドにより nvm をインストールしたので、こちらを使って、Node.js をインストールします。

*Node.js とは JavaScript の実行エンジンです。

インストールできるバージョンを調べる

今回は nvm コマンドでバージョンを指定して、Node.jsをインストールしますが、バージョンを省略すると、最新のバージョンが入ります。
バージョン指定するために下記コマンドを実行して、現在利用できる全てのバージョンを調べましょう。

$ nvm ls-remote
        v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        .
        .
        .
       v10.12.0
       v10.13.0   (Latest LTS: Dubnium)
        v11.0.0
        v11.1.0
        v11.2.0

Node.jsのバージョン番号は、奇数が開発版で、偶数が安定版になってるようです。

*
LTS ＝ Long Term Support ＝ 長期サポート
奇数：開発版は新機能を盛り込むチャレンジングなバージョン
偶数：安定版は安全な枯れたバージョン → LTS。実務向け

指定したバージョンをインストール

上記コマンド実行の結果、v10.13.0が最新版であり、長期的にサポートされているので、こちらのバージョンを指定してインストールするとします。

$ nvm install v10.13.0
Downloading and installing node v10.13.0...
Downloading https://nodejs.org/dist/v10.13.0/node-v10.13.0-darwin-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v10.13.0 (npm v6.4.1)
Creating default alias: default -> v10.13.0

バージョンを確認しましょう。バージョンが表示されれば使用できる状態にあります。

$ node -v
v10.13.0

インストールされているバージョンを確認しましょう。過去に別バージョンをインストールしたことがある方は、複数バージョンが表示されると思います。

$ nvm list
->     v10.13.0
default -> v10.13.0
node -> stable (-> v10.13.0) (default)
stable -> 10.13 (-> v10.13.0) (default)
iojs -> N/A (default)
lts/* -> lts/dubnium (-> v10.13.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.4 (-> N/A)
lts/carbon -> v8.12.0 (-> N/A)
lts/dubnium -> v10.13.0

デフォルトのバージョンを設定

今回は、バージョンを指定したため、それがデフォルトに設定されておりますが、複数のバージョンをインストールされている方は、次のコマンドでデフォルトのバージョンを設定することができます。
起動時にバージョン指定しなくて良くなります。

$ nvm alias default v10.13
default -> v10.13 (-> v10.13.0)

使用するバージョンを切り替える

また、使用するバージョンを切り替える場合は、下記コマンドを実行しましょう。
インストールされていないバージョンを使用したい場合は、先にそのバージョンをインストールしておきましょう。

$ nvm use v10.13.0
Now using node v10.13.0 (npm v6.4.1)

npmでライブラリのインストール

npmとは

npm は Node Package Managerの略で、Node.jsのモジュールを管理するツールです。
npm は、Node.jsをインストールすると同時にインストールされるので、すでに利用できる状態にあります。

npmでインストールする各ライブラリのひとつひとつは、モジュール( module )と呼ばれます。あるモジュールで、別のモジュールを利用するということはよくあることです。そうなると、別のモジュールに依存したモジュールもインストールしなくてはなりませんが、npmは、こうした依存関係を整理して、必要なモジュールを一気にインストールしてくれます。これを一般的に「依存関係の解決」といいます。

ローカルインストール

npm でライブラリ（モジュール）をインストールする場合に注意したいのが、どこにモジュールをインストールするのかです。npm 標準の状態では、カレントディレクトリにライブラリをインストールします（ローカルインストール）。

今回はrequestモジュールをローカルインストールするとします。

*requestモジュールを使うと、Webサイトから手軽にデータをダウンロードすることができます。

$ pwd
/Users/takuyanin/local

$ npm install request
npm WARN saveError ENOENT: no such file or directory, open '/Users/takuyanin/local/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/takuyanin/local/package.json'
npm WARN local No description
npm WARN local No repository field.
npm WARN local No README data
npm WARN local No license field.

+ request@2.88.0
added 48 packages from 59 contributors and audited 63 packages in 1.718s
found 0 vulnerabilities

package.jsonファイルがないため、怒られていますが、今回はモジュールのインストールにフォーカスして進めているため、ここでは良しとします。
注)基本的にnpm initでプロジェクトを開始した後に、モジュールをインストールします。

モジュールをインストールすると、カレントディレクトリ直下にnode_modulesというディレクトリが作成されているのが確認できると思います。このディレクトリの下に、インストールされたモジュールがダウンロードされております。

$ ls
node_modules/       package-lock.json

takuyanin:~/local
$ ls node_modules/
ajv/                fast-json-stable-stringify/ oauth-sign/
asn1/               forever-agent/          performance-now/
assert-plus/            form-data/          psl/
asynckit/           getpass/            punycode/
aws-sign2/          har-schema/         qs/
aws4/               har-validator/          request/
bcrypt-pbkdf/           http-signature/         safe-buffer/
caseless/           is-typedarray/          safer-buffer/
combined-stream/        isstream/           sshpk/
core-util-is/           jsbn/               tough-cookie/
dashdash/           json-schema/            tunnel-agent/
delayed-stream/         json-schema-traverse/       tweetnacl/
ecc-jsbn/           json-stringify-safe/        uri-js/
extend/             jsprim/             uuid/
extsprintf/         mime-db/            verror/
fast-deep-equal/        mime-types/

グローバルインストール

次に、グローバルインストールしてみます。これは、マシン全体で共有するツールやライブラリをインストールする際に利用します。インストールしたモジュールは特定のディレクトリにインストールされます。

インストール先の確認

npm でグロバールインストールする時にどこに入るかを調べるには、以下のコマンドを実行します。

$ npm root -g
/Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules

今回は、スクリプト言語のCoffee Scriptをインストールする場合、次のように、グローバルインストールします。
システム全体で、Coffee Scriptが使えるようになり便利です。

$ npm install -g coffee-script
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/coffee -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffee-script/bin/coffee
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/cake -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffee-script/bin/cake
+ coffee-script@1.12.7
added 1 package from 1 contributor in 0.974s

$ ls /Users/tafd/.nvm/versions/node/v10.13.0/lib/node_modules
coffee-script/  npm/

アンインストール

npmでは、CoffeeScriptはcoffee-scriptからcoffeescriptへと名前移動が行われたみたいですね。
では、アンインストールしてcoffeescriptをインストールしましょう。
グローバルインストールしたモジュールをアンインストールする場合、-gオプションをつけることに注意してください。

$ npm uninstall -g coffee-script
npm WARN rm not removing /Users/takuyanin/.nvm/versions/node/v10.13.0/bin/coffee as it wasn't installed by /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffee-script
npm WARN rm not removing /Users/takuyanin/.nvm/versions/node/v10.13.0/bin/cake as it wasn't installed by /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffee-script
removed 1 package in 0.073s

$ npm install -g coffeescript
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/cake -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffeescript/bin/cake
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/coffee -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/coffeescript/bin/coffee
+ coffeescript@2.3.2
added 1 package from 1 contributor in 0.904s

$ ls /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules
coffeescript/   npm/

coffeescriptがインストールされましたね。
このようにシステムにインストールしたものの不要になった場合など、簡単にアンインスールすることができます。

npm でインストールしたモジュールが参照できない場合

希に、グローバルインストールしたモジュールが、Node.jsで参照できないという問題が生じますが、それは、グローバルインストールしたディレクトリに、パスが通ってないために起きる現象です。その場合、環境変数NODE_PATHにnpmのグローバルパスを追加することで解決します。

$ echo export NODE_PATH=$(npm root -g) >> ~/.bashrc
$ source ~/.bashrc

パスの概念などに関しては下記リンクにまとめておりますので宜しければご参考ください。
環境構築の真髄(PATHなどの概念)を理解しよう[python編]

npmでプロジェクトを始めよう

npmが素晴らしいのは、モジュールを追加・削除できるだけでなく、プロジェクトの管理機能があることです。
npmでプロジェクトを開始するには、プロジェクトのディレクトリを作り、npm initコマンドを実行します。

$ mkdir project_npm

$ cd project_npm/

takuyanin:~/project_npm
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (project_npm) package_npm
version: (1.0.0)
description: npmを利用したプロジェクトを作ります。
entry point: (index.js)
test command:
git repository:
keywords:
author: Takuya Furukawa
license: (ISC)
About to write to /Users/tafd/project_npm/package.json:

{
  "name": "package_npm",
  "version": "1.0.0",
  "description": "npmを利用したプロジェクトを作ります。",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Takuya Furukawa",
  "license": "ISC"
}


Is this OK? (yes) yes

npm initを実行すると、プロジェクト名（package name）や、バージョン（version）、説明（description）などの情報を一つずつ質問されます。適当に答えるか、「Enter」キーを押していくと、最後に「Is this ok?」と聞かれるので、「Enter」を押すと、「package.json」というファイルが作成されます。
この「package.json」がnpmでプロジェクトを管理する設定ファイルとなります。

package.jsonにモジュールのインストールを記録する

このプロジェクトで利用するライブラリを npm でインストールする時には、--saveあるいは-Sというオプションをつけてインストールしましょう。すると、package.jsonの依存モジュールとして、インストールしたモジュールとそのバージョンを記録してくれます。

takuyanin:~/project_npm
$ less package.json
{
  "name": "package_npm",
  "version": "1.0.0",
  "description": "npmを利用したプロジェクトを作ります。",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Takuya Furukawa",
  "license": "ISC"
}


$ npm install colors --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN package_npm@1.0.0 No repository field.

+ colors@1.3.2
added 1 package from 2 contributors and audited 1 package in 1.335s
found 0 vulnerabilities


$ less package.json
{
  "name": "package_npm",
  "version": "1.0.0",
  "description": "npmを利用したプロジェクトを作ります。",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Takuya Furukawa",
  "license": "ISC",
  "dependencies": {
    "colors": "^1.3.2"
  }
}
package.json (END)

npm install colors --saveコマンド実行後、package.jsonを見てみると、dependenciesという項目が増え、そこに、モジュールとバージョンが記録されています。

package.jsonにモジュールを記録すると、このプロジェクトをバージョン管理したり、バックアップとして保存する際に、node_modulesディレクトリ以下のライブラリを保存しなくても良いというメリットがあります。
ライブラリとそのバージョンが記録されているので、npmを使う限り、そのインストールしたモジュールは、再びダウンロード可能というわけです。

では、試してみましょう。

takuyanin:~/project_npm
$ ls
node_modules/       package-lock.json   package.json

$ ls node_modules/
colors/

$ rm -rf ./node_modules/

$ ls
package-lock.json   package.json

$ npm install
npm WARN package_npm@1.0.0 No repository field.

added 1 package from 2 contributors and audited 1 package in 1.371s
found 0 vulnerabilities

$ ls
node_modules/       package-lock.json   package.json

$ ls node_modules/
colors/

npm installを実行しただけでcolorsモジュールが再びインストールされました。

では、いよいよ、スクリプトを実行いくことによって、プロジェクトを走らせましょう。

スクリプトの実行

スクリプトを実行するにあたって、そもそものプログラムファイルを生成しなくてはなりません。
コードについての詳しい説明は割愛しますが、project_npmの下にindex.jsファイルを作成し、package.jsonのscriptsにstartというエントリを追加してください。

index.js
const colors = require('colors');

const s1 = "Time is limitted resource all the living things have holded equally in life";
const s2 = "so I trust happiness comes to you after you think through what 'time is life' is,";
const s3 = "which is greater concept than 'time is money'";
const s4 = "Feel a sense of tension about an hour and lead to your specific actions";

console.log(s1.underline.red);
console.log(s2.inverse.blue);
console.log(s3.rainbow);
console.log(s4.inverse.red);
package.json
{
  "name": "package_npm",
  "version": "1.0.0",
  "description": "npmを利用したプロジェクトを作ります。",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "check": "node -v",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Takuya Furukawa",
  "license": "ISC",
  "dependencies": {
    "colors": "^1.3.2"
  }
}

$ npm run start

bash.png

スクリプトが無事実行されていますね。

$ npm run check

> package_npm@1.0.0 check /Users/tafd/project_npm
> node -v

v10.13.0

また、コマンドを省略してnpm runとだけ入力すると、実行できるコマンドの一覧を表示できます。

$ npm run
Lifecycle scripts included in package_npm:
  start
    node index.js
  test
    echo "Error: no test specified" && exit 1

available via `npm run-script`:
  check
    node -v

これは、非常に便利で、Node.jsを使って、さまざまなプロジェクトが作られていますが、そのプロジェクトをどのように実行すればよいかわからない時、npm runと打ち込んでみると、どんなコマンドで、何を実行することができるのか知ることができます。

yarn編

yarnとは

Yarn は、 Facebook が中心となって、開発している npm 互換のパッケージ管理システム（マネージャ）です。Yarn の Web サイトを見ると、速くて信頼性が高く安全で依存管理ができるシステムと謳っています。最初に「速い」と言うだけあって、 Yarn は npm よりも確かに速く動作するのが特徴です。

yarnのインストール

Node.js と npm がインストールされていれば、以下のようにして、Yarnをインストールできます。

$ npm install -g yarn
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/yarnpkg -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/yarn/bin/yarn.js
/Users/takuyanin/.nvm/versions/node/v10.13.0/bin/yarn -> /Users/takuyanin/.nvm/versions/node/v10.13.0/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.12.3

Homebrewパッケージマネージャーを使っても Yarn をインストールできます。Node.js がインストールされていない場合は合わせてインストールされます。

$ brew install yarn

nvm もしくは同様のものを使用している場合は、nvm のバージョンの Node.js を使用するように Node.js を除外してください。

$ brew install yarn --without-node

yarnのコマンドとnpmのコマンドの対応に関しては、下記のリングにわかり易く載っていましたので、ご参考ください。
ここでは割愛します。

yarnを使ってみた

yarnでプロジェクトを始めよう 

$ mkdir project_yarn

$ cd project_yarn/

$ yarn init
yarn init v1.12.3
question name (project_yarn):
question version (1.0.0):
question description: yarnを利用したプロジェクトを作ります。
question entry point (index.js):
question repository url:
question author: Takuya Furukawa
question license (MIT):
question private:
success Saved package.json
✨  Done in 46.31s.

流れはnpmを利用した場合と一緒ですね。

package.jsonにモジュールのインストールを記録する

　
必要なモジュールをインストールします。

$ yarn add webpack@3.6.0 webpack-dev-server@2.8.2 babel-core babel-loader@7.1.2 babel-preset-react babel-preset-es2015
yarn add v1.12.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 411 new dependencies.
info Direct dependencies
├─ babel-core@6.26.3
├─ babel-loader@7.1.2
├─ babel-preset-es2015@6.24.1
├─ babel-preset-react@6.24.1
├─ webpack-dev-server@2.8.2
└─ webpack@3.6.0
info All dependencies
├─ abbrev@1.1.1
├─ acorn-dynamic-import@2.0.2
...

Direct dependenciesに加えて、それらと依存関係のあるAll dependenciesもインストールされるため、実行結果は非常に長くなりますね。

$ less package.json
{
  "name": "project_yarn",
  "version": "1.0.0",
  "description": "yarnを利用したプロジェクトを作ります。",
  "main": "index.js",
  "author": "Takuya Furukawa",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "3.6.0",
    "webpack-dev-server": "2.8.2"
  }
}

各ライブラリを簡単に説明します。

  • webpack: 基本になるwebpack
  • webpack-dev-server: webpackをローカル上で動かす
  • babel-core:　ES2015をコンパイルするためのbabelに関連するもの
  • babel-loader:　babel-coreと同様
  • babel-preset-react: reactをコンパイルするためのライブラリ
  • babel-preset-es2015: es2015で書かれたソースコードをコンパイルするためのもの
$ ls
node_modules/   package.json    yarn.lock

同時に、yarn.lockファイルも作られます。

ここからは簡単にwebpackを使ってみましょう。

takuyanin:~/project_yarn
$ touch webpack.config.js

$ ls
node_modules/       package.json        webpack.config.js   yarn.lock

webpackを以下のように設定します。

webpack.config.js
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']
     }
   }]
 },
 resolve: {
   extensions: ['.js', '.jsx']
 },
 devServer: {
   historyApiFallback: true,
   contentBase: publidDir
 }
};
  • entry: コンパイルするファイル
  • output: コンパイルしたファイルの吐き出し場所
  • module: どのライブラリを使ってコンパイルするのかを設定する場所
  • resolve: entryファイルからimportされたファイルを検索する拡張子の指定
  • devServer: webpack-dev-serverの設定(contentBase: ドキュメントルート)

次に、publicフォルダとその下にhtmlファイルを追加します。

$ mkdir public
$ cd public
$ touch index.html

そして、public/index.htmlを以下のように編集します。

index.html
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack-practice</title>
  </head>
  <body>
    <div class="container">
      Hello World
    </div>
  </body>
  <script src="bundle.js" charset="utf-8"></script>
</html>

次に、srcフォルダとその下にindex.jsファイルを作ります。

$ mkdir src
$ cd src
$ touch index.js

これで、起動する準備ができたので一旦webpack-dev-serverを起動します。

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

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/takuyanin/project_yarn/public
404s will fallback to /index.html
Hash: a5b95b54061c6a97d6d2
Version: webpack 3.6.0
Time: 1003ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  328 kB       0  [emitted]  [big]  main
  [35] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
  [36] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
  [37] ./node_modules/url/url.js 23.3 kB {0} [built]
  [39] ./node_modules/url/util.js 314 bytes {0} [built]
  [40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [45] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [46] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [78] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
  [80] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [83] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [84] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
  [85] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [86] ./node_modules/events/events.js 8.33 kB {0} [built]
  [87] ./src/index.js 36 bytes {0} [built]
    + 73 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 1eb52fc1698d840fa6cf
Version: webpack 3.6.0
Time: 215ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  328 kB       0  [emitted]  [big]  main
  [83] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] ./src/index.js 37 bytes {0} [built]
    + 86 hidden modules
webpack: Compiled successfully.

localhost:8080にアクセスし、Hello Worldと表示されていれば成功です。

これでwebpackの超軽量アプリは完成ですが、src/index.jsが動いているかどうか確認するために、以下のように記述してみましょう。

index.js
alert("Hello World")

localhost:8080にアクセスし、Alertが出てきたら成功です。

処理の流れとして、
まず、public/index.htmlが呼び出されます。
次に

index.html
<script src="bundle.js" charset="utf-8"></script>

部分が呼び出されます。
そのため、index.htmlとindex.jsファイルが最低限用意されていればアプリとして成り立つのですね。
理解が難しい方は設定は、webpack.config.jsファイルに記述されているので、もう一度ご確認ください。

最後にファイルフォルダ構成だけ示しておきます。

takuyanin:~/project_yarn
$ ls
node_modules/       public/         webpack.config.js
package.json        src/            yarn.lock

あれ、react出てきたっけ。。。？
...

出てきておりませんね。
というのも、reactはフレームワークではなくライブラリ（モジュール）です。
ですので、下記コマンドをあるプロジェクトディレクトリで実行して、reactの構文を身につけて、reactアプリが作成できるということになります。
つまり、ここまでの知識があれば後は、Reactをひたすら勉強するのみですね！

$ yarn add react react-dom

おわりに

今回はこの辺で。
次回実際に軽量reactアプリを作成していきたいと思います。
何かご質問、ご指摘ございましたら、コメント欄などにてよろしくお願いいたします。

11
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
18