🥦 👿 🆓 パーセルの学習-小規模プロジェクト向けのWebパックの代替 🥇 🏧 😸

良い一日、友達！

WebpackやParcelなどのモジュールビルダーまたはバンドラーの主な目的は、アプリケーションの実行に必要なすべてのモジュールが、インデックスに含まれる1つの縮小（本番ビルド用）スクリプトに正しい順序で含まれるようにすることです。 html。

実際、ビルダーは、原則として、JSだけでなく、HTML、CSSファイルも最適化でき、Less、SassをCSSに、TypeScript、React and Vue（JSX）をJavaScriptに変換し、画像、オーディオ、ビデオなどを操作できます。データ形式、および次のような追加機能も提供します:(使用済み）リソースまたはソースのマップ（ソースマップ）の作成、バンドル全体とその個々の部分（モジュール、ライブラリ）のサイズの視覚的表現、コードを部分（チャンク）に分割する（以下を含む）数、再利用目的（たとえば、複数のモジュールで使用されるライブラリが別々のファイルに取り出されて1回だけロードされる）、npmからのパッケージのスマートロード（たとえば、moment.jsからロシアのローカリゼーションのみをロードする）、特定のタスクを解決するためのあらゆる種類のプラグイン等

この点で、Webpackが間違いなくリードしています。しかし、この優れたツールによって提供される機能のほとんどが必要とされないプロジェクトを開発している場合はどうなるでしょうか。習得と使用が簡単なこのテクノロジーの代替手段はありますか？私にとって、この質問に対する答えはパーセルでした。ちなみに、Webpackについて知りたい方は、こちらの動画をご覧になることをお勧めします。このチュートリアルのWebpack設定を含む私のファイルはここにあります。

あなたの許可を得て、特にロシア語で利用できるので、私は自分の言葉でドキュメントを再話しませんが、実用的なコンポーネントに焦点を当てます：テンプレート文字列と動的インポートを使用して、JavaScriptで3ページで構成されるSPAを作成します。 CSSでアプリケーションのスタイルを設定し、TypeScriptで簡単な関数を記述し、それをアプリケーションにインポートし、Sassを使用してこの関数の結果のコンテナーのスタイルを設定し、開発モードと本番モードの両方でParcelを使用してアプリケーションを構築します。

プロジェクトコードはこちらです。

興味のある方はフォローしてください。

応用

準備はいいですか？それでは行きましょう。

parcel-tutorialディレクトリを作成します。

そこに入り、を使用してプロジェクトを初期化しnpm init -yます。

index.htmlファイルを作成します。標準のブートストラップカバーテンプレートの1つを使用します。

<head>
    ...
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<!-- Bootstrap class -->
<body class="text-center">

    <! -- Main script -->
    <script src="index.js"></script>
</body>

Bootstrap の公式Webサイトにアクセスし、[例]セクションに移動して、カスタムコンポーネントのカバーを見つけ、Ctrl + U（Cmd + U）を押してページコードを表示します。

srcディレクトリを作成すると、その中にjsとcssの2つのフォルダがあります。

jsディレクトリに次のファイルを作成します：header.js、footer.js、home.js、projects.js、contact.js。これらはモジュール、または必要に応じて、アプリケーションのコンポーネントです。ヘッダー、フッター、メインページおよびその他のページのコンテンツです。

cssディレクトリに、style.cssファイルを作成します。

現時点では、プロジェクトの構造は次のようになっています。

-- parcel-tutorial
    -- src
        -- css
            -- style.css
        -- js
            -- contact.js
            -- footer.js
            -- header.js
            -- home.js
            -- projects.js
    -- index.html
    -- index.js
    -- package.json

ブートストラップに戻る。

小さな変更を加えて、ページコードを対応するモジュールにコピーして貼り付けます。

header.js：

export default `
  <header class="masthead mb-auto">
      <div class="inner">
          <h3 class="masthead-brand">Parcel Tutorial</h3>
          <nav class="nav nav-masthead justify-content-center">
            <a class="nav-link active" name="home">Home</a>
            <a class="nav-link" name="projects">Projects</a>
            <a class="nav-link" name="contact">Contact</a>
        </nav>
      </div>
  </header>
`.trim()

リンクのhrefをnameに変更したことに注意してください。

footer.js：

export default `
  <footer class="mastfoot mt-auto">
    <div class="inner">
      <p>© 2020. All rights reserved.</p>
    </div>
  </footer>
`.trim()

home.js：

export default `
  <h1 class="cover-heading">Home page</h1>
  <p class="lead">Home page content</p>
`.trim()

projects.js：

export default `
  <h1 class="cover-heading">Projects page</h1>
  <p class="lead">Projects page content</p>
`.trim()

contact.js：

export default `
  <h1 class="cover-heading">Contact page</h1>
  <p class="lead">Contact page content</p>
`.trim()

style.cssからstyle.cssにスタイルをコピーすることを忘れないでください。

index.jsを開きます。

ヘッダー、フッター、スタイルをインポートしましょう。

import header from './src/js/header.js'
import footer from './src/js/footer.js'
import './src/css/style.css'

リンクをクリックすると、メインページと他のページのコンテンツが動的に読み込まれるため、次のようなオブジェクトを作成します。

const pages = {
    home: import('./src/js/home.js'),
    projects: import('./src/js/projects.js'),
    contact: import('./src/js/contact.js')
}

このオブジェクトのプロパティの名前は、対応する（ユーザーが要求した）ページです。

以前にインポートしたヘッダーおよびフッターコンポーネントを使用して、スタートページを生成します。

// Bootstrap classes
document.body.innerHTML = `
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    ${header}
    <main role="main" class="inner cover"></main>
    ${footer}
</div>
`.trim()

ページのコンテンツはメイン要素に表示されるため、次のように定義します。

const mainEl = document.querySelector('main')

ページレンダリング関数を作成します。

const renderPage = async name => {
    const template = await pages[name]
    mainEl.innerHTML = template.default
}

対応するモジュールがロードされるのを待つ必要があるため、async / awaitを使用します（awaitキーワードは関数の実行を一時停止します）。この関数は、要求されたページの名前（name）を受け取り、それを使用して、pagesオブジェクト（pages [name]）の対応するプロパティにアクセスします。次に、結果のテンプレートをmainElに挿入します。実際、awaitは、テンプレートを含むModuleオブジェクトを返します。したがって、mainElにマークアップとしてテンプレートを挿入するときは、Moduleオブジェクトのデフォルトプロパティを参照する必要があります（モジュールはデフォルトでエクスポートされます）。そうしないと、エラーが発生します。オブジェクトをHTMLに変換できません。

メインページをレンダリングします。

renderPage('home')

現在のページに対応するアクティブリンクには、アクティブクラスがあります。新しいページをレンダリングするときにクラスを切り替える必要があります。ヘルパー関数を実装しましょう：

const toggleClass = (activeLink, currentLink) => {
    if (activeLink === currentLink) {
        return;
    } else {
        activeLink.classList.remove('active')
        currentLink.classList.add('active')
    }
}

この関数は、クラスがアクティブなリンク（activeLink）とクリックされたリンク（currentLink）の2つの引数を取ります。指定されたリンクが一致する場合、何もしません。それ以外の場合は、クラスを変更します。

最後に、リンククリックハンドラーを追加する必要があります。もう1つのヘルパー関数を実装しましょう：

const initClickHandlers = () => {
    const navEl = document.querySelector('nav')

    navEl.addEventListener('click', ev => {
        if (ev.target.tagName === 'A') {
            const activeLink = navEl.querySelector('.active')
            const currentLink = ev.target
            toggleClass(activeLink, currentLink)
            renderPage(currentLink.name)
        }
    })
}

この関数では、最初にnav要素を見つけます。次に、委任を通じて、リンクのクリックを処理します。ターゲット要素がAタグの場合、アクティブリンク（アクティブクラスとのリンク）、現在のリンク（クリックされたリンク）を取得し、クラスを変更してページをレンダリングします。現在のリンクのname属性の値は、renderPage引数として渡されます。

アプリはほぼ完成です。ただし、Parcelを使用してプロジェクトを構築する前に、次の点に注意する必要があります。現在、データを使用できますかによる動的モジュールのサポートは90％です。それはたくさんありますが、ユーザーの10％を失う準備はできていません。したがって、コードを最新ではない構文に変換する必要があります。バベルは転生に使用されます。 2つの追加モジュールを接続する必要があります。

import "core-js/stable";
import "regenerator-runtime/runtime";

これらのパッケージはnpmではインストールされないことに注意してください。

また、2つの数値を加算する関数のような非常に単純な関数をTypeScriptにすぐに実装しましょう。

次の内容でjsディレクトリにindex.tsファイルを作成します。

export const sum = (a: number, b: number): number => a + b

JavaScriptとの唯一の違いは、ファイル拡張子（.ts）を除いて、関数によって受け入れられて返される値のタイプ（この場合はnumber）を明示的に指定することです。実際、戻り型の定義に限定することもできます。TypeScriptは、戻り値が数値の場合、渡される引数は数値でなければならないことを知っているほど賢いです。気にしないで。

この関数をindex.jsにインポートしましょう：

import { sum } from './src/js/index.ts'

そして、renderPageの引数1と2を使用して呼び出します。

const renderPage = async name => {
    // ...
    mainEl.insertAdjacentHTML('beforeend', `
        <output>Result of 1 + 2 -> <span>${sum(1, 2)}<span></output>
    `)
}

Sassを使用した関数結果コンテナのスタイリング。cssフォルダーに、次の内容のstyle.scssファイルを作成します。

$color: #8e8e8e;

output {
    color: $color;
    border: 1px solid $color;
    border-radius: 4px;
    padding: .5rem;
    user-select: none;
    transition: transform .2s;

    & span {
        color: #eee;
    }

    &:hover {
        transform: scale(1.1);
    }
}

これらのスタイルをindex.jsにインポートしましょう：

import './src/css/style.scss'

TypeScriptとSassをnpmでインストールしていないことに再度注意してください。

アプリケーションが完成しました。パーセルに移ります。

小包

Parcelをグローバルにインストールするにnpm i parcel-bundler -gは、ターミナルでコマンドを実行する必要があります。

package.jsonを開き、開発モードと本番モードで実行するようにParcelを構成します。

"scripts": {
    "dev": "parcel index.html --no-source-maps --open",
    "pro": "parcel build index.html --no-source-maps --no-cache"
  },

チームnpm run devは開発用のプロジェクトの構築を開始npm run proし、チームは生産用に開始します。しかし、これらすべてのフラグはどういう意味ですか？そして、なぜnpm経由でBabel、TypeScript、Sassをインストールしなかったのですか？

事実、Parcelは、アプリケーションでのインポートまたは使用を検出すると、すべての依存関係を自動的にインストールします。たとえば、Parcelが.scssファイルからインポートされたスタイルシートを検出すると、Sassがインストールされます。

次に、チームとフラグについて説明します。

プロジェクトを開発モードでビルドするには、コマンドを使用しますparcel index.html。ここで、index.htmlはアプリケーションのエントリポイントです。メインスクリプトへのリンクを含むファイル。また、このコマンドはlocalhost：1234でローカルサーバーを起動します。

このフラグ--no-source-mapsは、リソースマップが不要であることを意味します。

国旗--openローカルサーバーのブラウザにビルドした後、index.htmlを開くようにParcelに指示します。

実稼働モードでプロジェクトをビルドするには、コマンドを使用しparcel build index.htmlます。このようなアセンブリは、JS、CSS、およびHTMLファイルの縮小を前提としています。

フラグ--no-cacheは、リソースキャッシュを無効にすることを意味します。キャッシングにより、プロジェクトの構築と再構築をリアルタイムで高速に行うことができます。これは開発時には関係がありますが、完成品を組み立てるときにはあまり関係ありません。

もう1つのポイント：デフォルトでは、Parcelは生成されたファイルをdistフォルダーに配置します。distフォルダーは、欠落している場合に作成されます。問題は、再構築時に古いファイルが削除されないことです。このようなファイルを削除するには、parcel-plugin-clean-easyなどの特別なプラグインが必要です。

を使用してこのプラグインをインストールしますnpm i parcel-plugin-clean-easy -D そして、package.jsonに以下を追加します。

"parcelCleanPaths": [
    "dist",
    ".cache"
  ]

parcelCleanPathsは、再構築時に削除されるディレクトリです。

これで、パーセルが完全に構成されました。ターミナルを開き、と入力してnpm run dev、Enterキーを押します。

Parcelはプロジェクトを開発モードでビルドし、ローカルサーバーを起動して、ブラウザーでアプリケーションを開きます。優れた。

それでは、制作用のプロジェクトをまとめてみましょう。

コマンドを実行しnpm run proます。

ブラウザでアプリケーションを起動します。

おっと、何かがうまくいかなかったようです。

生成されたindex.htmlを見てみましょう。そこには何が見えますか？ヒント：リンクタグとスクリプトタグのパスに注意してください。何に接続されているのか正確にはわかりませんが、Parcelは相対リンクを「/ path-to-file」に変換し、ブラウザはそのようなリンクを読み取りません。

この問題を解決するには、「pro」スクリプトに「--public-url。」フラグを追加する必要があります。

再構築を開始します。

相対パスは正しく、アプリケーションは機能します。涼しい。

私にとってはこれですべてです。清聴ありがとうございました。

パーセルの学習-小規模プロジェクト向けのWebパックの代替

応用

小包

More articles: