es6を使う場合、トランスパイラを使ってごにょごにょやると思いますが、webpackだったり色々入れたりして忘れるので、メモしておこうと思います。Hello Worldの表示もします。
いろんなパッケージをインストールする
npm init
yarn add react react-dom webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015
package.jsonを見るとパッケージが新たに追加されているはず。yarn.lockも作られているでしょう。yarn.lockも見てみると、入れたもののバージョンが色々書かれていますね。
両方に記述されるならpackage.jsonだけでよくね？と思うかもしれませんが、package.jsonを見てみるとこんな記述がいっぱいあります。
"webpack": "^4.8.3",
このwebpackでいえばバージョン4.8.3以上かつ5.0.0以下で最新のものが入ります。先頭のキャレット^がそういった指定をしているんですね。
じゃあ、これだけしかパッケージ関連のファイルがプロジェクトにないよー、となると時期によって最新のものは変わってきてしまうので、環境が変わってくる恐れがあります。
これではまずいので、yarn.lockに細かくバージョンを指定することによってそれを防いでくれるんですね。
webpack@^4.8.3: version "4.8.3"
yarn.lockをみるとこんな記述がある事がわかると思います。
yarn addでいろんなものをインストールしたけど、それらはnode_modulesディレクトリに入ります。それぞれのパッケージに依存関係のあるものも入るので量は多くなりますね。
Railsでいうgemfileとgemfile.lockと同じ様な感じですね。
webpack.config.jsを用意する
などをここで設定します。
var publidDir = __dirname + '/public';
module.exports = {
entry: [
'./src/index.js'
// コンパイルするファイルの指定
],
output: {
// コンパイルしたものをどこに吐き出すか
path: publidDir,
publicPath: '/',
filename: 'bundle.js'
},
module: {
// どんなモジュールを使ってコンパイルしていくか
rules: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
// webpack-dev-serverの設定
historyApiFallback: true,
contentBase: publidDir
// contentBaseがドキュメントルート。つまりここが最初に表示される。
}
};
それぞれのファイルを作成する
index.htmlを作成する
まずは、webpack-dev-serverで呼ばれるpublickDir配下のindex.htmlを作成します。
var publidDir = __dirname + '/public';
上記の様に設定してあるので、publicディレクトリを作り、その中にindex.htmlを作ります。
作ったら以下の様に記述しましょう。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>
これが表示されれば、Hello World!が出力されるはずです。
webpack-dev-serverを起動する
webpack-dev-serverを起動します。
./node_modules/.bin/webpack-dev-server
エラーが出る
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
以下の様なエラーが出ますね。
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
webpack-cliが足りない様なのでインストールして再度起動します。
$ yarn add webpack-cli $ ./node_modules/.bin/webpack-dev-server
custom keyword definition is invalid: data/errors should be boolean
$ npm uninstall ajv $ npm install ajv@6.8.1
Cannot find module 'webpack-cli/bin/config-yargs'
HelloWorld表示
localhost:8080にアクセスしてみるとHello World!が表示されていますね。
追記
今試したら、src/index.jsがなくてうまく動かないので、先にsrc/index.jsを作ってから./node_modules/.bin/webpack-dev-serverを実行しよう。
index.jsとbundle.jsを作成する
さっき作成したwebpack.config.jsを見てほしいんですが、ここですね。
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: publidDir,
publicPath: '/',
filename: 'bundle.js'
},
これは、src/index.jsのコンパイル先がbundle.jsでbundle.jsにアクセスするとsrc/index.jsをコンパイルしたものが表示されます。
これを体現するために、bundle.jsを読み込んでみましょう。index.htmlファイルに以下の記述を書きます。
<script src="bundle.js" charset="utf-8"></script>
そして、src/index.jsを作り、適当にアラートを出してみます。
alert('hello');
これでlocalhost:8080にアクセスするとアラートが表示されますね。
面白いのが、alert('hello')を記述して保存するとそれがすぐさまブラウザに反映されるところです。
ブラウザのコンソールを開いて見てみると保存するたびにこんな記述がなされます。
App updated. Recompiling...
保存するたびにコンパイルが走ってそれが表示されていますね。webpack.config.jsの設定通りの動作をしている事がわかると思います。
え？ビルドしたファイルは見れないの？
index.jsをビルドしたファイルがbundler.jsならそのファイルどこで見れるんだよ？は？？となりますが、webpackを実行する事で、ファイルをビルドする事ができます。
./node_modules/.bin/webpack
上記のコマンドを打つとビルドしたファイルがpublicディレクトリ配下にsrc/index.jsがビルドされたファイルが吐き出されるのを確認できるでしょう。
なぜ、このディレクトリに吐き出されるかはwebpack.config.jsでpathを指定しているからですね。