React
どのように基本的なWebpack、反応し、環境を設定する

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

備考

このビルドパイプラインは、「プロダクションレディ」とは限りませんが、探している開発環境を得るために必要なものを追加することができます。いくつかの人々が（自分自身を含めて）取るアプローチは、Yeoman.ioや他の場所の完全に構築されたパイプラインを取って、それがスタイルに合うまで望ましくないものを取り除くことです。これには何も問題はありませんが、おそらく上記の例では、反対のアプローチを選択して、裸の骨から構築することができます。

あなたが追加したいかもしれない何かは、テストフレームワークやモカやジャスミンのカルマのようなカバレッジ統計のようなものです。 ESLintを用いて糸を引っ張る。 webpack-dev-serverのホットモジュールの置き換えにより、Ctrl + S、F5の開発経験を得ることができます。また、現在のパイプラインはdevモードでしか構築されないため、プロダクションビルドタスクは良好です。

ゴッチャ！

コンテキストプロパティに注意してくださいwebpack.config.js私たちは連結ではなく、私たちのパスを定義するためにノード・パスモジュールを使用している__dirname文字列に/srcので、これは窓が前方slashsesを嫌っています。したがって、ソリューションをよりクロスプラットフォームに適合させるには、ノードを活用して活用してください。

webpack.config.jsプロパティの説明

コンテキスト

これは相対パスを解決するためにwebpackがルートパスとして使用するファイルパスです。したがって、index.jsxではrequire('./index.html')を使用していrequire('./index.html')ドットは実際にはsrc/ディレクトリに解決されるため、このプロパティで定義されています。

エントリ

webpackが最初にソリューションのバンドルを開始する場所。このため、index.jsxではニーズとインポートのソリューションをまとめていることがわかります。

出力

ここでは、webpackがバンドルしたファイルを削除する場所を定義します。バンドルされたjavascriptとスタイルが削除されるファイルの名前も定義しました。

devServer

これらはwebpack-dev-serverに固有の設定です。 contentBaseは、サーバがどこにルートを作るべきかを定義します。ここでは、 dist/フォルダをベースとして定義しています。 portは、サーバーがホストされるポートです。 openは、webpack-dev-serverにサーバーの起動後にデフォルトブラウザを開くように指示するために使用されるものです。

モジュール>ローダー

これは、webpackが異なるファイルを見つけたときに何をするかを知るために使用するマッピングを定義します。 testプロパティは、webpackがこのモジュールを適用するかどうかを判断するために使用するregexを与えます。ほとんどの場合、ファイル拡張子にマッチします。 loaderまたはloadersは、ファイルをwebpackにロードし、そのローダーがそのファイルタイプのバンドルを処理するために使用するローダーモジュールの名前を指定します。また、javascriptにはqueryプロパティがありquery 。これは単にローダにクエリ文字列を提供するため、私たちが望むならHTMLローダでクエリプロパティを使用している可能性があります。それは物事をするための別の方法です。

カスタマイズされた「Hello world」の画像を使ってパイプラインを構築する方法

ステップ1：Node.jsをインストールする

構築するビルドパイプラインはNode.jsに基づいているため、最初のインスタンスでこれがインストールされていることを確認する必要があります。 Node.jsをインストールする方法については、ここで SOのドキュメントをチェックアウトすることができます

ステップ2：プロジェクトをノードモジュールとして初期化する

コマンドラインでプロジェクトフォルダを開き、次のコマンドを使用します。

npm init

この例では、デフォルト設定を自由に使用することができます。または、パッケージ構成の設定に関するこの SOのドキュメントをすべて確認することができます。

ステップ3：必要なnpmパッケージをインストールする

コマンドラインで次のコマンドを実行して、この例で必要なパッケージをインストールします。

npm install --save react react-dom

次に、devの依存関係のために、このコマンドを実行します：

npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader

最後に、webpackとwebpack-dev-serverは、プロジェクトの依存関係としてではなく、グローバルにインストールする価値のあるものです。依存関係として追加したい場合は、そうしてもらえません。実行するコマンドは次のとおりです。

npm install --global webpack webpack-dev-server

手順3：プロジェクトのルートに.babelrcファイルを追加する

これで、インストールしたばかりのプリセットを使用するように設定されます。 .babelrcファイルは次のようになります。

{
  "presets": ["react", "es2015"]
}

手順4：プロジェクトのディレクトリ構造を設定する

ディレクトリのルートに以下のようなディレクトリ構造を設定します。

|- node_modules
|- src/
  |- components/
  |- images/
  |- styles/
  |- index.html
  |- index.jsx
|- .babelrc
|- package.json

注： node_modules 、 .babelrc 、およびpackage.jsonは、以前の手順からすでにそこに入っている必要があります。

ステップ5：プロジェクトにHello Worldプロジェクトファイルを取り込む

これはパイプラインを構築するプロセスにとって本当に重要ではありませんので、私はあなたにこれらのコードを与えて、それらを貼り付けることができます：

src / components / HelloWorldComponent.jsx

import React, { Component } from 'react';

class HelloWorldComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'Student'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({name: e.target.value});
  }

  render() {
    return (
      <div>
        <div className="image-container">
          <img src="./images/myImage.gif" />
        </div>
        <div className="form">
          <input type="text" onChange={this.handleChange} />
          <div>
            My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
          </div>
        </div>
      </div>
    );
  }
}

export default HelloWorldComponent;

src / images / myImage.gif

私たちが画像を一緒にまとめることができるということを証明するために、あなたが好きな画像でこれを置き換えることを自由にしてください。独自のイメージを提供していて、別の名前を付けた場合は、変更を反映するためにHelloWorldComponent.jsxを更新するHelloWorldComponent.jsxがあります。同様に、ファイル拡張子が異なる画像を選択した場合、webpack.config.js内の画像ローダーのtestプロパティを、適切な正規表現で新しいファイル拡張子に合わせて変更する必要があります。

src / styles / styles.css

.form {
  margin: 25px;
  padding: 25px;
  border: 1px solid #ddd;
  background-color: #eaeaea;
  border-radius: 10px;
}

.form div {
  padding-top: 25px;
}

.image-container {
  display: flex;
  justify-content: center;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning to build a react pipeline</title>
</head>
<body>
  <div id="content"></div>
  <script src="app.js"></script>
</body>
</html>

index.jsx

import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';

require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');

render(<HelloWorldComponent />, document.getElementById('content'));

ステップ6：ウェブパック設定を作成する

プロジェクトのルートにwebpack.config.jsという名前のファイルを作成し、このコードをコピーします。

webpack.config.js

var path = require('path');

var config = {
  context: path.resolve(__dirname + '/src'),
  entry: './index.jsx',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname + '/dist'),
  },
  devServer: {
    contentBase: path.join(__dirname + '/dist'),
    port: 3000,
    open: true,
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: "style!css"
      },
      {
        test: /\.gif$/,
        loaders: [
          'file?name=[path][name].[ext]',
          'image-webpack',
        ]
      },
      { test: /\.(html)$/,
        loader: "file?name=[path][name].[ext]"
      }
    ],
  },
};

module.exports = config;

手順7：パイプライン用のnpmタスクを作成する

これを行うには、プロジェクトのルートにあるpackage.jsonファイルで定義されたJSONのscriptsキーに2つのプロパティを追加する必要があります。スクリプトのキーを次のようにします。

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

testスクリプトはすでにそこにあり、あなたはそれを保持するかどうかを選択できますが、この例では重要ではありません。

手順8：パイプラインを使用する

コマンドラインから、プロジェクトのルートディレクトリにいる場合、次のコマンドを実行できるはずです。

npm run build

これはあなたが構築した小さなアプリケーションをまとめて、プロジェクトフォルダのルートに作成するdist/ディレクトリに配置します。

次のコマンドを実行すると：

npm start

次に、構築したアプリケーションは、webpack devサーバインスタンス内のデフォルトのWebブラウザに提供されます。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow