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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

小云云

Jan 11, 2018 am 09:27 AM

babel react webpack

この記事では主に 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的环境搭建好了，接下来我们就可以此基础上来进行开发了。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7563

CakePHP チュートリアル

1384

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

React と WebSocket を使用してリアルタイムチャットアプリを構築する方法 Sep 26, 2023 pm 07:46 PM

React と WebSocket を使用してリアルタイムチャットアプリケーションを構築する方法はじめに: インターネットの急速な発展に伴い、リアルタイムコミュニケーションがますます注目を集めています。ライブチャットアプリは、現代の社会生活や仕事生活に不可欠な部分になっています。この記事では、React と WebSocket を使用して簡単なリアルタイムチャットアプリケーションを構築する方法と、具体的なコード例を紹介します。 1. 技術的な準備リアルタイムチャットアプリケーションの構築を開始する前に、次のテクノロジとツールを準備する必要があります。 React: 構築用の 1 つ

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンドコードとバックエンドコードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法 Sep 27, 2023 am 11:09 AM

React と Flask を使用してシンプルで使いやすい Web アプリケーションを構築する方法はじめに: インターネットの発展に伴い、Web アプリケーションのニーズはますます多様化および複雑化しています。使いやすさとパフォーマンスに対するユーザーの要件を満たすために、最新のテクノロジースタックを使用してネットワークアプリケーションを構築することがますます重要になっています。 React と Flask は、フロントエンドおよびバックエンド開発用の 2 つの非常に人気のあるフレームワークであり、うまく連携してシンプルで使いやすい Web アプリケーションを構築します。この記事では、React と Flask を活用する方法について詳しく説明します。

React と RabbitMQ を使用して信頼性の高いメッセージングアプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージングアプリケーションを構築する方法はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザーインターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージングミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージングアプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法 Sep 26, 2023 pm 02:25 PM

React コードデバッグガイド: フロントエンドのバグをすばやく見つけて解決する方法はじめに: React アプリケーションを開発するとき、アプリケーションをクラッシュさせたり、不正な動作を引き起こしたりする可能性のあるさまざまなバグに遭遇することがよくあります。したがって、デバッグスキルを習得することは、すべての React 開発者にとって不可欠な能力です。この記事では、フロントエンドのバグを見つけて解決するための実践的なテクニックをいくつか紹介し、読者が React アプリケーションのバグをすばやく見つけて解決できるようにする具体的なコード例を示します。 1. デバッグツールの選択: In Re

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティングライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンドルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法 Sep 26, 2023 pm 06:12 PM

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法はじめに: 今日の情報爆発の時代において、データ分析はさまざまな業界で不可欠なリンクとなっています。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。 1. 概要 React はビルドするためのツールです

React と Docker を使用してフロントエンドアプリケーションをパッケージ化してデプロイする方法 Sep 26, 2023 pm 03:14 PM

React と Docker を使用してフロントエンドアプリケーションをパッケージ化およびデプロイする方法フロントエンドアプリケーションのパッケージ化とデプロイは、プロジェクト開発の非常に重要な部分です。最新のフロントエンドフレームワークの急速な発展により、React は多くのフロントエンド開発者にとって最初の選択肢となっています。コンテナ化ソリューションとして、Docker はアプリケーションのデプロイメントプロセスを大幅に簡素化できます。この記事では、React と Docker を使用してフロントエンドアプリケーションをパッケージ化してデプロイする方法を紹介し、具体的なコード例を示します。 1. 準備始める前に、インストールする必要があります

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック