ホームページ > 記事 > ウェブフロントエンド > Webpack、Babel、および React 開発環境のセットアップに関するチュートリアル

Webpack、Babel、および React 開発環境のセットアップに関するチュートリアル

小云云オリジナル: 2018-01-11 09:27:021300ブラウズ

この記事では主に Webpack+Babel+React 開発環境を構築する手順を詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

1. Webpack について理解する

アプリケーションを構築する前に、Webpack はさまざまなファイル (ReactJS、Babel、Coffeescript、Less/Sass など) をコンパイルできるモジュールパッケージングツールであることを理解しましょう。次にモジュールをパッケージ化します。

2. Webpack をインストールします

プロジェクトでの開発に Webpack の使用を開始するには、まずグローバル環境に Webpack をインストールする必要があります。

npm install webpack -g

3. プロジェクトを作成します

インストール後、learn-webpack という名前のプロジェクトを作成し、プロジェクトフォルダーに任意の名前を付けることができます。

mkdir learn-webpack && cd learn-webpack

エディターで作成したプロジェクトフォルダーを見つけます

次に、2つのファイルを作成しましょう:

app.js

document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

その後、実行しますターミナル

webpack ./app.js ./dist/bundle.js

最後にローカルhttpサービスを開始するために実行します

python -m SimpleHTTPServer

この時点で、ブラウザに次のように入力できます:http ://localhost:8000

ブラウザに Hello world が表示されたら、Webpack を使用して main.js を package.js にパッケージ化し、bundle.js にコンパイルしたことを意味します。

設定ファイルを定義する

上記は、Webpack の使用方法の簡単な紹介にすぎません。実際、すべてのプロジェクトには、何を行う必要があるかを Webpack に伝えるための webpack.config.js が含まれている必要があります。

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

次に、ターミナルで webpack

を実行して、パッケージ化とコンパイルの結果が前の入力 webpack ./app.js ./dist/bundle.js と同じかどうかを確認します。

エントリ: パッケージ化するエントリファイルを指定します

1. 単一のファイルを単一の出力ファイルにパックします。例: エントリ: "main.js"

2。ファイルを 1 つの出力ファイルにまとめるには、ファイル名を配列に入れます。例:entry:['main.js','xx.js']

3. 複数のファイルを複数の出力ファイルにパックし、ファイル名をに入れます。キーペア、例: エントリ: {a:'main.js',b:'xx.js'}

出力: パッケージ化結果を設定します

パスは定義された出力フォルダー、ファイル名は名前ですパッケージ化結果ファイル (指定されている場合) パッケージ化エントリファイルは上記の 1 または 2 の場合で、ファイル名は出力するファイルの名前を直接指定します。 3 番目の場合、ファイル名は [名前].ファイル名.js のように記述する必要があり、ファイル名の [名前] がエントリのキーになります。

変更を監視し、自動的にパッケージ化します

コードに変更を加え続ける場合は、一度変更しないように、手動で再度パッケージ化します。 webpackのwatch機能を利用することができます。

webpack --watch または webpack -w

または、構成コードで watch を直接 true に設定することもできます

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

4. Babel の使用

Babel とは何ですか? Babel は JavaScript コンパイラーです。これを使用して ES6 構文を ES5 構文に変換し、現在の環境で実行できるようにします。

ターミナルで実行します: npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

インストールが完了したら、以前の webpack.config.js を次のように変更する必要があります:

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

ES6 構文を使用してファイルにコードを書くことができます。次を追加してテストしてみましょう:

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

コンソールに「Using Babel」で「I am now」が表示される場合。 !" が出力され、Babel モジュールが正常にインストールされ、ES6 を使用してコードの記述を開始できることが示されます。

ローダー項目は、このタイプのリソースをロードするために使用されるローダーを示します。

test は、一致するリソースの種類を示す正規表現です。

exclude は無視するファイルを指定します。ここでは /node_modules/ を指定します。

クエリには 2 つの記述方法があり、1 つは文字列形式でローダー名を直接続ける方法です:

loader: &#39;babel-loader?presets[]=es2015

もう 1 つは、この記事で示されているとおりです:

query: {
 presets: [&#39;es2015&#39;]
}

resolve.extensions は、それを指定するために使用されます。プログラムは自動的にどのサフィックスを認識します

サフィックスが必要ない状況に対応する

すでに Webpack と Babel を設定しています。いくつかの導入を経て、基本的な環境がセットアップされたので、React を使い始めます。

ターミナルに次のコードを入力してreactとreact-domをインストールします

npm install react react-dom --save

Babel针对React的所有的预设插件

npm install babel-preset-react --save-dev

由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

现在创建一个名为hello.js的文件

import React from "react";

class Hello extends React.Component{
 render() {
  return (
   <p>
     Hello, World!
   </p>
  )
 }
}

export default Hello;

然后将app.js里面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

Webpack、Babel、および React 開発環境のセットアップに関するチュートリアル

関連記事