ホームページ > 記事 > ウェブフロントエンド > Parcelを使った梱包方法
この記事ではParcel梱包例(React HelloWorld)を中心に、Parcel梱包の特徴や活用例を詳しく紹介していますので、興味のある方は
Parcel梱包の特徴
梱包時間が非常に早い
Parcelについても詳しくご紹介しています。ワーカー プロセスを使用してマルチコア コンパイルを有効にします。ビルドを再開した後でも高速な再コンパイルを可能にするファイル システム キャッシュもあります。
すべてのリソースをパッケージ化
Parcel は JS、CSS、HTML、ファイルなどをすぐにサポートしており、プラグインは必要ありません。
自動変換
Babel、PostCSS、PostHTML、さらには、必要に応じてコードを自動的に変換するために、node_modules パッケージも使用されます
コード分割を構成します
動的 import() 構文を使用して、Parcel は出力ファイルをバンドルします (バンドル)。 ) したがって、必要なコードを初期ロード時にロードするだけで済みます。
ホット モジュールの置き換え
Parcel は、開発環境では、コードの変更に応じてブラウザーで自動的に更新されます。
わかりやすいエラー ログ
エラーが発生した場合、Parcel は問題の特定に役立つ構文を強調表示したコード スニペットを出力します。
Parcel にパッケージ化された React HelloWorld アプリケーション。 GitHub アドレス: https://github.com/justjavac/parcel-example/tree/master/react-helloworld
0. 新しいディレクトリを作成します
mkdir react-helloworld cd react-helloworld
1. npm
yarn init -y
または
npm init -y
を初期化します。この時点で、package.json ファイルが作成されます。 ファイルの内容:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}2. React を追加します。
yarn add react react-domnpm:
npm install react react-dom --savepackage.json ファイルの内容:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ }
}
3.
新しい .babelrc ファイルを作成します
touch .babelrcInput content:
{
"presets": ["react"]
}Add babel-preset-react:yarn:yarn add babel-preset-react -Dnpm:
npm install babel-preset-react --Dこのとき、package.json ファイルの内容:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
- }
+ },
+ "devDependencies": {
+ "babel-preset-react": "^6.24.1"
+ }
} 5. Parcel を追加します
yarn:
yarn add parcel-bundler -Dnpm:
npm install parcel-bundler --Dこの時点で、package.json ファイルの内容:
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
- "babel-preset-react": "^6.24.1"
+ "babel-preset-react": "^6.24.1",
+ "parcel-bundler": "^1.0.3"
}
}
6. 新しいindex.html ファイルを作成します
content
<html> <body> <p id="root"></p> <script src="./index.js"></script> </body> </html>
7. 新しい Index.js ファイルを作成します
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById("root")); 8. パッケージ化コマンド
{
"name": "parcel-example-react-helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "parcel index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-preset-react": "^6.24.1"
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.0.3"
}
}を追加します。
を実行したら、
yarn startまたは
npm startで http://localhost:1234 を開きます。ブラウザ パッケージ化プロセスでは、.cache と dist という 2 つのディレクトリが生成されます。git プロジェクトの場合は、新しい .gitignore ファイルを作成して、これらの 2 つのディレクトリを無視できます。
.cache dist node_modules上記は、私が全員のためにコンパイルしたものです。将来的には誰にとっても役立つことを願っています。 関連記事:
vueの画像切り抜きとアップロード機能をjsでCropperで実装する方法
Vuexのミューテーションとアクションの違いは何ですか？ (詳細なチュートリアル)
vueで写真をトリミングしてサーバーにアップロードする機能を実装する方法
easyuiの日付と時刻ボックスのieの互換性の実際的な問題を解決する方法 (詳細なチュートリアル)
を説明するImmutable と React to you の詳細 実践的なスキル
Node.js で readline を使用してファイルのコンテンツを 1 行ずつ読み書きする方法
以上がParcelを使った梱包方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。