webpackのインストール
Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルにまとめてくれる便利なツールです。
npmでインストールします。
npmとnodeのバージョンは以下の通りで環境構築を進めます。
chihiro.matsuda$ npm -v
5.6.0
chihiro.matsuda$ node -v
v8.9.4
cd react-sample
私はreact-sample というディレクトリ内で作業することにしました。npmのパッケージ郡もこのディレクトリ以下に設置します。
>npm initの実行
npm initでpackage.jsonを作ります。
任意のディレクトリでターミナルから npm initを実行します。
全部Enterキー連打でも問題ありません。
chihiro.matsuda$ 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: (react_sample) react-beginner <<< パッケージ名
version: (1.0.0) 0.0.0 <<< バージョン
description: package for react beginner<<< パッケージの説明
entry point: (index.js)<<< ビルドされるJSをファイル名
test command:<<< テストコマンド
git repository: git://github.com/chihirokaasan/react-beginner<<<git リポジトリ
keywords: react <<< npm 公開時に必要らしい
author: ITKAASAN.LLC<<< 著者
license: (ISC)<<< ライセンスこのまま
About to write to /Users/chihiro.matsuda/work/react_sample/package.json:
{
"name": "react-beginner",
"version": "0.0.0",
"description": "package for react beginner",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/chihirokaasan/react-beginner.git"
},
"keywords": [
"react"
],
"author": "ITKAASAN.LLC",
"license": "ISC",
"bugs": {
"url": "https://github.com/chihirokaasan/react-beginner/issues"
},
"homepage": "https://github.com/chihirokaasan/react-beginner#readme"
}
できあがったpackage.jsonのファイル
webpackのインストール
ではさっそくwebpackのインストールを行います。
グローバル
chihiro.matsuda$ npm install webpack -g
プロジェクト毎
chihiro.matsuda$ npm install webpack --save-dev
今回はプロジェクト毎にインストールする方を選択しました。
package.jsonのdevDependenciesにバージョン付きで登録します。
npm installするとpackage.jsonに自働で追記されます。
"devDependencies": {
"webpack": "^3.10.0"
}
試しに何かビルドしたい。そうだ、jQuery入れよう。
試しにjQueryをnpmでインストールして、ちょっとしたイベントを別ファイルで書いて、webpackで一つのファイルにビルドしてもらう手順をやります。
jQueryをnpmでインストールする
chihiro.matsuda$ npm install jquery --save
webpackとinstallのオプションが違うのでdependenciesに保存されます。
package.jsonのdependenciesに関する情報はこちらでよくまとまっております。
ちゃんと使い分けてる? dependenciesいろいろ。
var $ = require("jquery");
$(function(){
console.log('hoge');
});
PATHを通して、webpackのビルドコマンドを実行
webpackでビルドします。
nodeモジュールのパスを通す
export PATH=$PATH:./node_modules/.bin
今回はシンプルにjQueryを呼び出してコンソールに文字列を出力するだけ。
/javascript/sample1.js
var $ = require("jquery");
$(function(){
console.log('hoge');
});
私はjavascriptディレクトリを掘って、そこにjsファイルを作りました。
これをビルドします。すると、カレントディレクトリにbundle.jsができあがります。
chihiro.matsuda$ webpack javascript/sample1.js bundle.js
ビルドしたファイルをHTMLで呼び出し
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webpack build test</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
本来jQuery本体と、実行のスクリプト２つ読み込まないといけないですが、ビルドされてひとつにまとまっているため、ビルドされたファイルだけが読み込まれていればOK。
console.logの出力結果console.logの出力結果
サンプルはこちら
※reactのことを書こうと思うも、環境構築のことをつらつら書いていたらなかなかreactのことが書けない。。