ホームページ > 記事 > ウェブフロントエンド > 宅配梱包例の詳しい説明
この記事では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
この時点で、ファイルの内容:
{ "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:
を追加します。yarn add react react-dom
npm:
npm install react react-dom --save
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" + "license": "ISC", + "dependencies": { + "react": "^16.2.0", + "react-dom": "^16.2.0" + } }
3. Babel を追加します
新しい .babelrc ファイル
touch .babelrc
入力内容:
{ "presets": ["react"] }
add babel-preset-react:
yarn:
yarn add babel-preset-react -D
npm:
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. パーセルを追加します。
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ファイル
りー
7. 新しいindex.jsファイル
<html> <body> <p id="root"></p> <script src="./index.js"></script> </body> </html>
8. パッケージングコマンドを追加
9. 完了
りー
とかimport React from "react"; import ReactDOM from "react-dom"; const App = () => { return <h1>Hello World!</h1>; }; ReactDOM.render(<App />, document.getElementById("root"));ブラウザで http を開きます ://localhost:1234
パッケージ化プロセスにより、.cache と dist という 2 つのディレクトリが生成されます。git プロジェクトの場合は、新しい .gitignore ファイルを作成して、これらの 2 つのディレクトリを無視できます。
{ "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" } }GitHub アドレス: https://github .com/justjavac/parcel-example/tree/master/react-helloworld
Parcel.js と Vue 2.x による非常に高速なゼロ構成のパッケージング体験 例
シンプルな gulp パッケージングの nodejs 実装の詳細な説明
以上が宅配梱包例の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。