Parcel は、ホットな開発プロジェクト環境を提供できるWeb 側のパッケージング ツールです。それ以外の場合は、Webpack の方
がプロジェクトをビルドするよりも高速です。
ここで、ローカルにディレクトリを作成し
、作成したディレクトリをエディタで開き、ターミナルを実行します。ターミナル
に npm init と入力して、プロジェクトを初期化します。
実行後、package.json ファイルを取得します
。その後、インポートする必要があります。パーセルを
受け取り、それをターミナルで実行します。
npm install parcel-bundler
インストール後、package.json をチェックして対応する依存関係パッケージを確認し
、プロジェクトのルート ディレクトリ src を作成し、その下にindex.html を作成します。
参考コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
非常に一般的な HTML ファイル形式です
次に、package.json の script の下に 2 行のコードを追加します。
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
パッケージとコンパイル コマンドを追加し、src の下のindex.html を介してパッケージ化してコンパイルすることを伝えます。
次に、js エントリー ファイルを作成する必要があります。
プロジェクトの src ディレクトリの main フォルダーに main.js ファイルを作成し、
src 配下のindex.html にエントリー ファイルをインポートします。
参考コードは次のとおりです。
<script src="./main/main.js" type = "module"></script>
モジュール開発なのでタイプをmoduleに設定し
、mainに文章を出力します。
console.log("执行成功");
次に、ターミナルで実行します
npm run dev
この時点で、プロジェクトはポート上で実行されており
、このアドレスをブラウザにコピーしてページを実行し
、プロジェクト ディレクトリを確認します。新しく生成された dist がパッケージ化したファイルです。
