区画を使用してReactプロジェクトを設定する方法
序章
ParcelJS は、それ自体を非常に高速なゼロ構成のWebアプリケーションバンドラーと表現しています。
Parcelは、JavaScriptバンドラーを使用してアプリを作成する方が簡単であるという前提に基づいています。 Webpackはより優れた構成可能性を提供しますが、その程度の構成を必要としないユースケースがあるかもしれません。
これがParcelの出番です。 構成がゼロの高速バンドルツールであると自慢しています。必要なのは、アプリケーションのエントリポイントにポイントすることだけです。
パーセルは、次の機能も提供します。
- バンドル時間の短縮-Parcelは、他のバンドルツールよりもかなり高速です。 以下は、GitHubのParcelページのスクリーンショットです。
- アセットのバンドル-Parcelは、JS、CSS、HTML、ファイルアセットをすぐにサポートします。
- 自動変換-すべてのコードは、Babel、PostCSS、およびPostHTMLを使用して自動的に変換されます。
- コード分割-Parcelを使用すると、動的なimport()構文を使用して出力バンドルを分割できます。
- ホットモジュール交換(HMR)-Parcelは、開発中に変更を加えると、ブラウザーのモジュールを自動的に更新します。構成は必要ありません。
- エラーログ-Parcelは、問題を特定するのに役立つエラーが発生すると、構文で強調表示されたコードフレームを出力します。
Parcelについてもう1つ注意すべき点は、開発者がJSモジュールではなくindex.html
ファイルをエントリポイントとして使用できることです。
このチュートリアルでは、Parcelを使用してReactWebアプリをセットアップします。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルは、ノードv14.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
を生成します:
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
を作成し、次のコンテンツを追加します。
index.html
<html> <body> <script src="./index.js"></script> </body> </html>
これにより、JavaScriptファイルを参照する基本的なWebページが作成されます。
次に、index.js
ファイルを作成し、次のコンテンツを追加します。
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
ファイルを作成し、次のように編集します。
.babelrc
{ "presets": ["env", "react"] }
これで、Babelは、ES6 /ES7JavaScriptをブラウザーにとって意味のあるJavaScriptバンドルに変換するように構成されました。
次に、Reactアプリとそのコンポーネントの作成を開始できます。
index.html
ファイルを開き、以下のコードに置き換えます。
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
ファイルを作成し、次のコード行を追加します。
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開始アプリです。 HelloMessage
コンポーネントは、app
のid
でdiv
のindex.html
ファイルにレンダリングされます。
次に、Header
コンポーネントを作成します。
作業ディレクトリに戻り、components
ディレクトリを作成します。
mkdir -p src/components
そして、このディレクトリにHeader.js
という名前のJavaScriptファイルを作成し、次のコード行を追加します。
src / components / 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
そして、このディレクトリにparcel-logo.svg
という名前のSVGファイルを作成し、次のコード行を追加します。
src / img / 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ファイルをインポートします。
src / index.js
import './scss/app.scss' ...
次に、app.scss
ファイルを作成しましょう。
作業ディレクトリに戻り、scss
という名前のディレクトリを作成します。
mkdir -p src/scss
そして、このディレクトリにapp.scss
ファイルを作成し、次のコード行を追加します。
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
ファイルに追加します。
package.json
"scripts": { "start": "parcel index.html" },
これにより、コマンドnpm start
で実行されるスクリプトが作成されます。 このスクリプトは、index.html
ファイルをエントリファイルとして使用して開発サーバーを起動するようにParcelに指示します。
端末でnpm start
コマンドを実行します。
npm start
これで、ブラウザでhttp://localhost:1234/
を開くことができます。
この時点で、ホットモジュールのリロードで実行されているReactアプリケーションがあります。
ステップ3—本番環境向けの構築
Parcelで本番環境に移行するためにアプリを準備するには、parcel build index.html
コマンドを実行する必要があります。
これをpackage.json
ファイルのscripts
オブジェクトに追加します。
package.json
"scripts": { "start": "parcel index.html", "build": "parcel build index.html" },
npm run build
コマンドを実行すると、Parcelは監視モードとホットモジュールの交換を無効にするため、ビルドは1回だけになります。
npm run build
また、すべての出力バンドルのミニファイアがファイルサイズを縮小できるようにします。 build
コマンドは、NODE_ENV=production
環境変数も設定するプロダクションモードも有効にします。
Parcelには、アプリを本番モードに向けて準備する方法を選択するために使用できるいくつかのオプションもあります。
Parcelが本番ファイルを配置するための別のディレクトリ(dist
がデフォルトのディレクトリ)を希望する場合は、build
の最後に--out-dir directory-name
を追加して指定できます。 ] package.json
のキー:
package.json
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --out-dir directory-name" },
デフォルト設定である縮小を無効にしたい場合は、package.json
のbuild
キーの最後に--no-minify
を追加すると、次のようになります。 :
package.json
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --no-minify" },
ファイルシステムのキャッシュを無効にする場合は、package.json
のbuild
キーの最後に--no-cache
を追加すると、次のようになります。
package.json
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --no-cache" },
さまざまなオプションの詳細については、公式ドキュメントをご覧ください。
結論
このチュートリアルでは、WebアプリをParcelにバンドルしました。 パーセルはまだ比較的新しく、そのサポートは毎日増え続けています。 そのユースケースはWebpackとは異なる場合がありますが、日常のWeb開発で検討できるバンドルツールです。
Parcel repo をチェックして、問題を確認し、プルリクエストを送信できます。
このチュートリアルのコードベースは、GitHubにあります。