React+Webpackクイックマニュアル（結び目）

9370 ワード
React Webpack
前言
この記事はReactとWebpackに関する教程ではなく、現在のこの2つの人気のある技術を早く使いやすくするための先端ガイドであり、両者について基本的な認識があると仮定しています。もしあなたが先にReactを知りたいなら、勝手にReactの公式教程に移行してもいいです。他のモジュールを使ってロードと資源パッケージ技術を使ったら、Webpackから提供されたアイデアを見に来てもいいです。
webstorm+react+webpack
webstormを使うことを強くオススメします。もちろん、atom、Sublimeなどのエディタを使ってもいいですが、webstormを選んだのは、react JSXの文法ハイライトと手動でEmmetを開いてjsxに対するサポートをデフォルトでサポートしているからです。
まずこのようにあなたのプロジェクト構造を組織してください。

--your project
 |--app
 |--components
  |--productBox.jsx
 |--main.js
 |--build
 |--index.html
 |--bundle.js(    webpack      )
npmでreact、webpackを取り付けます。
デフォルトではnodejsがインストールされています。npm initはヒント入力内容に従ってpackage.jsonファイルを作成します。
次に、順次入力します。

npm install react --save-dev


npm install webpack --save-dev
最新バージョンのReactとWebpackをインストールし、package.json内の開発依存項目に保存します。
webpack.co.nfig.jsプロファイルを作成します。webpack.config.jsというファイルを新たに作成します。これを長く持つべきです。

var path = require('path');

module.exports = {
 entry: path.resolve(__dirname, './app/main.js'),
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};
このうち、entryはwebpackの入口プログラムを指定しています。c++とjavaのメーンプログラムのように、最終的にページの指定された位置に挿入するreactテンプレートをmain.jsに書き込みます。
ap/mail.js

var React = require('react');
var AppComponent = require('./components/productBox.js');
React.render(<AppComponent />, document.getElementById('content'));
を選択します。
app/components/productBox.js

var React = require('react');
var ProductBox = React.createClass({
 render: function () {
 return (
  <div className="productBox">
  Hello World!
  </div>
 );
 }
});

module.exports = ProductBox;
Outputは、webpackパッケージが成功した後のファイル名とファイルの保管場所を指定しています。
前に指定したプロジェクト構造に従って、直接パッケージ作成のbundle.jsを導入できます。このように：
build/index.

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="bundle.js"></script>
</body>
</html>
webpack-dev-serverをインストールして有効にします。
webpack-dev-serverは現地プロジェクトをnginxのようなウェブサーバーに走らせてもいいです。もっと重要なのは、package.jsonファイルの中でscriptsを定義できます。webpackのプロファイルを修正してBrowserSyncのような効果があります。
まずpackage.jsonを開けて、scriptsコードブロックを探します。webpack-dev-serverを導入していない前に、このプロジェクトを実行する姿勢はこうです。
修正scriptsは

"scripts": {
 "build": "webpack"
}
そして実行:

npm run build
プロジェクトは走ってきましたが、プログラムを修正するたびに私たちはみんな手動でnpm run buildを入力して項目を走ります。これはとても卵が痛いことです。でもwebpack-dev-serverの環があります。私達の姿勢はこうです。
スクリプトに追加

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}
ps：devにおける各属性値の意味は：
  • webpack-dev-server:local host:8080にウェブサーバ
    • を確立します。
  • --devtool eval:あなたのコードのためにソースアドレスを作成します。エラーがあったら、ファイルと行番号
    • をより正確に位置決めすることができます。
  • --progress:マージコードの進捗を表示する
  • --colors:コマンドラインに色を表示する
  • --content-base build：設定された出力ディレクトリ
    • を指します。
    index.に加えます。
    build/index.
    
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
</head>
<body>
 <div id="content"></div>
 <script src="http://localhost:8080/webpack-dev-server.js"></script>
 <script src="bundle.js"></script>
</body>
</html>
    webpack.co nfig.jsの入り口に参加します。
    
var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 }
};
    変更を行うとブラウザが自動的に更新されます。
    最後の実行:
    
npm run dev
    ブラウザでこのアドレスを開けてください。http://localhost:8080webpack-dev-serverはあなたのためにすべてを準備してくれます。キーボードを叩くと、saveが見られます。
    Webpack Loader
    ここまで話しますと、基本的には簡単なwebプロジェクトを迅速に構築することができますが、webpack loaderと言わざるを得ません。他のモジュールより牛Xをロードするところです。レactの開発に使います。レactと生まれつきの優れた性能を合わせて、この二つの天衣無縫の組み合わせはまるで黄金の組み合わせです。
    全体的にはwebpack loaderが実現できる：
  • は、React JSX文法をjs文
    • に変換することができる。
  • React開発ではES 6文法をサポートします。
  • は、importによって直接css、less、sassを導入することをサポートし、さらには、ピクチャ
    • をサポートする。
  • は、cssで参照されたピクチャサイズをサポートし、あるサイズの範囲で直接BASE 64フォーマット
    • に変換する。
    があります。など
    上記の機能を効果的にするために、まず対応するものをインストールします。
    babel-loader
    
npm install babel-loader --save-dev
    css-loader
    
npm install css-loader --save-dev
    less-loader
    
npm install less-loader --save-dev
    style-loader
    
npm install style-loader --save-dev
    url-loader
    
npm install url-loader --save-dev
    具体的な実現は、webpackの構成ファイルにmodule属性の中のloadersを入れさえすればいいです。
    
var path = require('path');

module.exports = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js',
 },
 module: {
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};
    ファイルの拡張子を指定して対応するloader操作を実行します。他の種類のファイルを簡単に導入することもできます。最後に導入されたファイルは全部bundle.jsに梱包されます。
    開発環境における最適化
    Reactコンポーネントを開発したコードの中で、webpackの助けで、私達は全部require（react）方式でReactJSを導入しています。デフォルトのrequire（）方法はwebpack包装の時にReactJSとその依存を遍歴します。考えてみてください。もし私たちが他のライブラリを導入したら、例えばjQuery、react-router、momentなど、requireは同じ方法で遍歴します。これは包装の時間を大幅に増加します。これは明らかに開発の効率に影響します。
    包装プロセスをできるだけ速くするために、その行為を書き直して、開発に依存する圧縮バージョンを使うように励ますべきです。
    reactだけ導入したら、webpack.co.nfig.jsをこのように修正できます。
    
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {
  'react': pathToReact
 }
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [pathToReact],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

module.exports = config;
    recove属性の中のaliasはwebpackに教えてあげます。reactを導入すると、圧縮されたreactにマッチングしようとします。
    moduleのnoParseは、圧縮ファイルを解析しようとwebpackが試みたときに、このような行為は許されないということです。
    もちろんです。もっと多くの倉庫を導入すると、このように書くと多少冗長になります。そのためにはもっと優雅な書き方があります。
    
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [ 
 'react/dist/react.min.js',
 'react-router/dist/react-router.min.js',
 'moment/min/moment.min.js'
];
var config = {
 entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
 resolve: {
 alias: {}
 },
 output: {
 path: path.resolve(__dirname, './build'),
 filename: 'bundle.js'
 },
 module: {
 noParse: [],
 loaders: [{
  test: /\.jsx?$/,
  loader: 'babel'
 }, {
  test: /\.css$/,
  loader: 'style!css'
 }, {
  test: /\.less$/,
  loader: 'style!css!less'
 },{ 
  test: /\.(png|jpg)$/, 
  loader: 'url?limit=25000' 
 }]
 }
};

deps.forEach(function (dep) {
 var depPath = path.resolve(node_modules_dir, dep);
 config.resolve.alias[dep.split(path.sep)[0]] = depPath;
 config.module.noParse.push(depPath);
});

module.exports = config;
    瞬時にbigerが立ち上がりました。飾りをつけてから、ReactとWebpackの楽しみをより便利で効率的に楽しみましょう。
    関連コードはここで確認しますをクリックしてください。自分で体験してください。
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
    php配列には中国語のソート方法が含まれています。
    PHPがURL中国語GBK文字化け問題を解決する二つの方法