Webpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Webpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）

亚连

Jun 12, 2018 pm 05:59 PM

babel react webpack

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

1. 構築する前に知っておくべきこと。 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を実行します。 js ./dist/bundle.js

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

python -m SimpleHTTPServer

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

ブラウザに Hello world! が表示されたら、Webpack を使用して main.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;);

ログイン後にコピー

ES6 は、コンソールに「現在 Babel を使用しています!」と表示される場合は、それを示すテキストを表示します。 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には次のコードが必要です変更される予定です。

モジュール -> ローダーの下のクエリを次のように変更します:

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

上面是我整理给大家的，希望今后会对大家有帮助。

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

如何解决iview 的select下拉框选项错位的问题，具体操作如下

如何通过Vue.js实现select下拉列表，具体操作如下

以上がWebpack+Babel+React環境構築に対する詳しい回答（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

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

7487

CakePHP チュートリアル

1377

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 レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法 Sep 26, 2023 am 11:34 AM

React レスポンシブデザインガイド: アダプティブフロントエンドレイアウト効果を実現する方法モバイルデバイスの人気と、マルチスクリーンエクスペリエンスに対するユーザーの需要の高まりに伴い、レスポンシブデザインは最新のフロントエンド開発における重要な考慮事項の 1 つとなっています。 React は、現在最も人気のあるフロントエンドフレームワークの 1 つであり、開発者がアダプティブレイアウト効果を実現するのに役立つ豊富なツールとコンポーネントを提供します。この記事では、React を使用してレスポンシブデザインを実装するためのガイドラインとヒントをいくつか紹介し、参考として具体的なコード例を示します。 Reactを使用したファイル

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 はビルドするためのツールです

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版

ホットトピック