区画を使用してReactプロジェクトを設定する方法
序章
ParcelJS は、それ自体を非常に高速なゼロ構成のWebアプリケーションバンドラーと表現しています。
Parcelは、JavaScriptバンドラーを使用してアプリを作成する方が簡単であるという前提に基づいています。 Webpackはより優れた構成可能性を提供しますが、その程度の構成を必要としないユースケースがあるかもしれません。
これがParcelの出番です。 構成がゼロの高速バンドルツールであると自慢しています。必要なのは、アプリケーションのエントリポイントにポイントすることだけです。
パーセルは、次の機能も提供します。
- バンドル時間の短縮-Parcelは、他のバンドルツールよりもかなり高速です。 以下は、GitHubのParcelページのスクリーンショットです。
- アセットのバンドル-Parcelは、JS、CSS、HTML、ファイルアセットをすぐにサポートします。
- 自動変換-すべてのコードは、Babel、PostCSS、およびPostHTMLを使用して自動的に変換されます。
- コード分割-Parcelを使用すると、動的なimport（）構文を使用して出力バンドルを分割できます。
- ホットモジュール交換（HMR）-Parcelは、開発中に変更を加えると、ブラウザーのモジュールを自動的に更新します。構成は必要ありません。
- エラーログ-Parcelは、問題を特定するのに役立つエラーが発生すると、構文で強調表示されたコードフレームを出力します。
Parcelについてもう1つ注意すべき点は、開発者が index.html JSモジュールではなく、エントリポイントとしてのファイル。
このチュートリアルでは、Parcelを使用してReactWebアプリをセットアップします。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルは、Nodev14.4.0で検証されました。 npm v6.14.5、 parcel-bundler v1.12.4、 react v16.13.1、および react-dom v16.13.1。
ステップ1—パーセル入門
まず、新しい作業ディレクトリを作成します。
- mkdir parcel-test
次に、新しい作業ディレクトリに移動します。
- cd parcel-test
そして、ターミナルで以下のコマンドを実行して、Parcelをグローバルにインストールします。
- npm install -g parcel-bundler
次に行うことは、を作成することです package.json ディレクトリ内のファイル。 これを行うには、以下のコマンドを実行します。
- npm init -y
それは動作を生成します package.json あなたのために：
{
"name": "parcel-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Parcelは、任意のタイプのファイルをエントリポイントとして使用できますが、HTMLまたはJavaScriptファイルから始めることをお勧めします。 相対パスを使用してメインのJavaScriptファイルをHTMLにリンクすると、Parcelもそれを処理します。
作成する index.html 次のコンテンツを追加します。
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
これにより、JavaScriptファイルを参照する基本的なWebページが作成されます。
次に、を作成します index.js ファイルを作成し、次のコンテンツを追加します。
console.log("hello world");
これにより、出力するスクリプトが作成されます。 "hello world" コンソールへのメッセージ。
ファイルが作成されたので、アプリを実行する準備が整いました。 Parcelには開発サーバーが組み込まれており、ファイルを変更するとアプリが自動的に再構築され、高速開発のためのホットモジュール交換がサポートされます。
アプリを実行するには、以下のターミナルコマンドを実行します。
- parcel index.html
これで開くことができます http://localhost:1234/ ブラウザで：
期待される出力については、コンソールを確認してください。
ステップ2— ParcelandReactを使用してプロジェクトを設定する
次に、Parcelを使用してReactプロジェクトを設定します。
続行する前に、いくつかの依存関係をインストールする必要があります。
- npm install react react-dom
上記の依存関係はReactとをインストールします react-dom アプリケーションで。 ReactはES6で書かれているので、コードを変換する方法が必要になります。 パーセルは、構成を必要とせずにそれを行います。 あなたがしなければならないのはプリセットをインストールすることだけであり、Parcelはあなたのために重労働を行います。
- npm install --save-dev babel-preset-env babel-preset-react
依存関係がインストールされたら、 .babelrc ファイルを作成し、次のように編集します。
{
"presets": ["env", "react"]
}
これで、Babelは、ES6 /ES7JavaScriptをブラウザーにとって意味のあるJavaScriptバンドルに変換するように構成されました。
次に、Reactアプリとそのコンポーネントの作成を開始できます。
開く index.html ファイルを作成し、以下のコードに置き換えます。
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>
<div id="app"></div>
<script src="./src/index.js"></script>
</body>
</html>
このコードは <title> と <div id="app">. また、基本的なスタイリングのためにBullmaCSSフレームワークを追加します。 また、新しい index.js 次に作成するファイル。
次に、という名前のディレクトリを作成します src:
- mkdir src
そして、このディレクトリに作成します index.js ファイルを作成し、次のコード行を追加します。
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
class HelloMessage extends React.Component {
render() {
return (
<div>
<Header />
<div className="container">
<h1>Hello {this.props.name}</h1>
</div>
</div>
);
}
}
let App = document.getElementById('app');
ReactDOM.render(<HelloMessage name="Yomi" />, App);
これは基本的なReact開始アプリです。 The HelloMessage コンポーネントはでレンダリングされます index.html のファイル div と id の app.
次に、 Header 成分。
作業ディレクトリに戻り、作成します components ディレクトリ：
- mkdir -p src/components
そして、このディレクトリにという名前のJavaScriptファイルを作成します Header.js 次のコード行を追加します。
import React from 'react';
import ParcelLogo from '../img/parcel-logo.svg';
const Header = () => (
<header>
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="/">
<img width="120" src={ParcelLogo} alt="" />
</a>
</div>
</nav>
</header>
);
export default Header;
次に、を作成しましょう ParcelLogo.
作業ディレクトリに戻り、を作成します img ディレクトリ：
- mkdir -p src/img
そして、このディレクトリに、という名前のSVGファイルを作成します parcel-logo.svg 次のコード行を追加します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068.58691 218.40186" fill="#E7DACB"><title>Asset 1</title><path d="M134.10156,41.99756c25.2002,0,42.6001,17.40039,42.6001,42.60059v54.60059c0,25.2002-17.3999,42.60059-42.6001,42.60059H66.90088v76.20117H23.7002V41.99756Zm24,46.80078c0-18.6001-10.80029-29.40039-29.40039-29.40039H42.30029V240.6001h6V164.39893h80.40088c18.6001,0,29.40039-10.7998,29.40039-29.40039ZM128.70117,65.39795c15.00049,0,23.40039,8.40039,23.40039,23.40039v46.2002c0,15.00049-8.3999,23.40039-23.40039,23.40039H48.30029v-93.001Zm-5.3999,75.60107c6.6001,0,10.2002-3.6001,10.2002-10.2002V92.99854c0-6.6001-3.6001-10.2002-10.2002-10.2002H66.90088V140.999Z" transform="translate(-23.7002 -40.79785)"/><path d="M223.79834,258.00049H179.09766L248.69873,41.99756h50.40039L368.7002,258.00049h-46.501l-14.09961-48.60156H238.19873ZM343.19922,240.6001l-55.5-181.20215H260.09863L203.69824,240.6001h5.7002l15-48.60059H322.7998L337.499,240.6001ZM263.69873,65.39795,226.19824,185.99951H320.999L284.09912,65.39795Zm9.8999,24.00049,22.80029,79.20068h-46.2002Z" transform="translate(-23.7002 -40.79785)"/><path d="M509.99512,258.00049l-34.7998-80.10107H440.39453v80.10107h-43.2002V41.99756H507.2959c25.2002,0,42.59961,17.40039,42.59961,42.60059v50.70068c0,20.3999-11.39941,35.7002-29.39941,40.80029l36,81.90137Zm18.90039-17.40039-34.7998-79.80127h7.7998c18.60059,0,29.40039-10.7998,29.40039-29.3999V88.79834c0-18.6001-10.7998-29.40039-29.40039-29.40039H415.79492V240.6001h6V160.79883h66L522.5957,240.6001ZM525.2959,131.39893c0,15-8.40039,23.3999-23.40039,23.3999H421.79492V65.39795h80.10059c15,0,23.40039,8.40039,23.40039,23.40039Zm-28.80078,6.2998c6.60059,0,10.2002-3.6001,10.2002-10.2002v-34.5c0-6.6001-3.59961-10.2002-10.2002-10.2002H440.39453v54.90039Z" transform="translate(-23.7002 -40.79785)"/><path d="M697.49316,91.79834c0-6.6001-3.59961-10.2002-10.2002-10.2002h-46.7998c-6.60059,0-10.2002,3.6001-10.2002,10.2002V208.19971c0,6.59961,3.59961,10.19922,10.2002,10.19922H687.293c6.60059,0,10.2002-3.59961,10.2002-10.19922V181.79932h43.20117V216.6001c0,25.19922-17.40039,42.59961-42.60059,42.59961H629.69238c-25.2002,0-42.59961-17.40039-42.59961-42.59961V83.39844c0-25.20068,17.39941-42.60059,42.59961-42.60059h68.40137c25.2002,0,42.60059,17.3999,42.60059,42.60059v34.80029H697.49316Zm-4.7998-27.6001c15,0,23.40039,8.3999,23.40039,23.3999v13.80029h6V87.59814c0-18.6001-10.7998-29.40039-29.40039-29.40039H635.09277c-18.59961,0-29.40039,10.80029-29.40039,29.40039V212.39893c0,18.60059,10.80078,29.40039,29.40039,29.40039h57.60059c18.60059,0,29.40039-10.7998,29.40039-29.40039V199.19971h-6v13.19922c0,15.001-8.40039,23.40039-23.40039,23.40039H635.09277c-15,0-23.40039-8.39941-23.40039-23.40039V87.59814c0-15,8.40039-23.3999,23.40039-23.3999Z" transform="translate(-23.7002 -40.79785)"/><path d="M920.38965,41.99756V82.79834H822.28809v44.40039h79.501V167.999h-79.501v49.20068h98.10156v40.80078H779.08789V41.99756ZM901.78906,240.6001v-6H803.68848v-84.001h79.501v-6.00049h-79.501V65.39795h98.10059v-6H797.68848V240.6001Z" transform="translate(-23.7002 -40.79785)"/><path d="M1001.68555,41.99756V217.19971h90.60156v40.80078H958.48535V41.99756Zm72.001,198.60254v-6H983.08594V59.39795h-6V240.6001Z" transform="translate(-23.7002 -40.79785)"/></svg>
Parcelは、画像などのアセットのインポートもサポートしています。
もう1つ注意すべき点は、ParcelにはSassサポートも付属しているということです。 作業ディレクトリに戻り、インストールします node-sass それを使用するには：
- npm install node-sass
あなたが持ったら node-sass インストールすると、JavaScriptファイルからSCSSファイルをインポートできます。 あなたの中で index.js ファイルの場合、SCSSファイルをインポートするには、ファイルの先頭に以下のコード行を追加します。
import './scss/app.scss'
...
次に、を作成しましょう app.scss ファイル。
作業ディレクトリに戻り、という名前のディレクトリを作成します scss:
- mkdir -p src/scss
そして、このディレクトリに作成します app.scss ファイルを作成し、次のコード行を追加します。
body {
background-color: #fefefe;
text-align: center;
.navbar {
background: #21374B;
color: #E7DACB;
height: 50px;
}
h1 {
font-size: 40px;
margin-top: 30px;
}
}
このコードは、 <body> と <nav class="navbar"> とタイポグラフィ <h1>.
Reactアプリのセットアップが完了したので、次のステップはそれを実行して、それが機能するかどうかを確認することです。 これを実現するには、を構成する必要があります package.json. 以下のコード行をに追加します package.json ファイル：
"scripts": {
"start": "parcel index.html"
},
これにより、コマンドで実行されるスクリプトが作成されます npm start. このスクリプトは、Parcelに次のコマンドを使用して開発サーバーを起動するように指示します。 index.html エントリファイルとしてのファイル。
を実行します npm start ターミナルのコマンド：
- npm start
これで開くことができます http://localhost:1234/ ブラウザで：
この時点で、ホットモジュールのリロードで実行されているReactアプリケーションがあります。
ステップ3—本番環境向けの構築
Parcelで本番環境に移行するためにアプリを準備するには、 parcel build index.html 指図。
それをに追加します scripts のオブジェクト package.json ファイル：
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
実行したら npm run build コマンドを実行すると、Parcelは監視モードとホットモジュールの交換を無効にするため、ビルドは1回だけになります。
- npm run build
また、すべての出力バンドルのミニファイアがファイルサイズを縮小できるようにします。 The build コマンドはまた、生産モードを有効にします。 NODE_ENV=production 環境変数。
Parcelには、アプリを本番モードに向けて準備する方法を選択するために使用できるいくつかのオプションもあります。
Parcel用に別のディレクトリを使用して本番ファイルを（dist はデフォルトのディレクトリです）、追加することで指定できます --out-dir directory-name の終わりに build キー入力 package.json:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --out-dir directory-name"
},
デフォルト設定であるミニファイを無効にしたい場合は、追加することでそれを行うことができます --no-minify の終わりに build キー入力 package.json したがって、次のようになります。
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --no-minify"
},
ファイルシステムのキャッシュを無効にしたい場合は、追加することで無効にできます --no-cache の終わりに build キー入力 package.json したがって、次のようになります。
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --no-cache"
},
さまざまなオプションの詳細については、公式ドキュメントをご覧ください。
結論
このチュートリアルでは、WebアプリをParcelにバンドルしました。 パーセルはまだ比較的新しく、そのサポートは毎日増え続けています。 そのユースケースはWebpackとは異なる場合がありますが、日常のWeb開発で検討できるバンドルツールです。
Parcel repo をチェックして、問題を確認し、プルリクエストを送信できます。
このチュートリアルのコードベースは、GitHubにあります。
