React
インストール
サーチ…
シンプルなセットアップ
フォルダの設定
この例では、 src/
コードとout/
出力することを想定しています。このようにフォルダ構造は次のようになります
example/
|-- src/
| |-- index.js
| `-- ...
|-- out/
`-- package.json
パッケージの設定
セットアップnpm環境を仮定すると、最初に、Reactコードをes5準拠のコードに変換するために、babelを設定する必要があります。
$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
上記のコマンドは、webpackで使用するローダーモジュールとコアbabelライブラリをインストールするようnpmに指示します。また、JSXとes6モジュールコードを理解するためにes6と反応するプリセットをインストールします。 (プリセットに関する詳細は、ここでBabelプリセットを参照してください)
$npm i -D webpack
このコマンドはwebpackを開発の依存関係としてインストールします。 ( 私はインストールの略語であり、 -Dは--save-devの略語です)
追加のwebpackパッケージ(追加のローダーやwebpack-dev-server extensionなど)をインストールすることもできます。
最後に、実際の反応コードが必要になります
$npm i -D react react-dom
ウェブパックの設定
依存関係の設定では、webpackに何をすべきかを伝えるためにwebpack.config.jsファイルが必要になります
シンプルなwebpack.config.js:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'out'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
このファイルはwebpackにindex.jsファイル(src /にあると仮定)で始まり、 out
ディレクトリの単一のbundle.jsファイルに変換するように指示します。
module
ブロックは、正規表現に対して見つかったすべてのファイルをテストするようにwebpackに指示し、一致した場合、指定されたローダを呼び出します。 (この場合、 babel-loader
)さらに、 exclude
regexは、 node_modules
フォルダ内のすべてのモジュールのこの特別なローダーを無視するようにnode_modules
ます。これは、蒸散プロセスのスピードアップに役立ちます。最後に、 query
オプションは、webpackにどのパラメータをbabelに渡すかを伝え、以前にインストールしたプリセットを渡すために使用されます。
セットアップのテスト
今残っているのは、 src/index.js
ファイルを作成し、アプリケーションをパックすることです
src / index.js:
'use strict'
import React from 'react'
import { render } from 'react-dom'
const App = () => {
return <h1>Hello world!</h1>
}
render(
<App />,
document. getElementById('app')
)
このファイルは、通常、単純な<h1>Hello world!</h1>
ヘッダーをID「app」のhtmlタグにレンダリングしますが、今のところコードを一度トランスペアレントにするだけで十分です。
$./node_modules/.bin/webpack .
ローカルにインストールされたバージョンのwebpackを実行します(-gを使用してwebpackをグローバルにインストールした場合は$webpack
使用します)
これは、変換されたコードをout/bundle.js
ファイルout/bundle.js
を内部に作成し、その例を終了するはずです。
webpack-dev-serverの使用
セットアップ
webpackを使用する簡単なプロジェクトを設定した後、 $npm i -g webpack-dev-server
を発行して反応させると、より速く開発できるように開発用httpサーバーがインストールされます。
webpack.config.jsの変更
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'out'),
publicPath: '/public/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
hot: true
}
};
変更は
output.publicPath
を提供するためのパスを設定します (詳細はWebpack設定ファイルを参照してください)devServer
-
contentBase
静的ファイルを提供するための基本パス(index.html
) -
hot
は、ディスク上のファイルに変更が加えられたときにwebpack-dev-serverをホットリロードするように設定します
-
最後に、アプリをテストするために単純なindex.htmlが必要です。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React Sandbox</title>
</head>
<body>
<div id="app" />
<script src="public/bundle.js"></script>
</body>
</html>
この設定で$webpack-dev-server
を実行すると、ポート8080上のローカルhttp $webpack-dev-server
が起動し、接続時に<h1>Hello world!</h1>
を含むページがレンダリングされます。