この記事では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 id="Hello-nbsp-World">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 サイトの他の関連記事を参照してください。
分享PyCharm项目打包的简易方法Dec 30, 2023 am 09:34 AM简单易懂的PyCharm项目打包方法分享随着Python的流行，越来越多的开发者使用PyCharm作为Python开发的主要工具。PyCharm是功能强大的集成开发环境，它提供了许多方便的功能来帮助我们提高开发效率。其中一个重要的功能就是项目的打包。本文将介绍如何在PyCharm中简单易懂地打包项目，并提供具体的代码示例。为什么要打包项目？在Python开发
如何使用Python正则表达式进行代码打包和分发Jun 23, 2023 am 09:31 AM随着Python编程语言的日益流行，越来越多的开发者开始使用Python编写代码。但是在实际使用中，我们常常需要将这些代码打包并分发给其他人使用。本文将介绍如何使用Python正则表达式进行代码打包和分发。一、Python代码打包在Python中，我们可以使用setuptools和distutils等工具来打包我们的代码。这些工具可以将Python文件、模块
怎么使用pkg将Node.js项目打包为可执行文件？Jul 26, 2022 pm 07:33 PM如何用pkg打包nodejs可执行文件？下面本篇文章给大家介绍一下使用pkg将Node.js项目打包为可执行文件的方法，希望对大家有所帮助！
linux打包是什么意思Feb 23, 2023 pm 06:30 PM在linux中，打包指的是一个文件或目录的集合，而这个集合被存储在一个文件中；简单来说，打包是指将一大堆文件或目录变成一个总的文件。打包文件没有经过压缩，因此它占用的空间是其中所有文件和目录的总和。
Python 应用的终极进化：PyInstaller 的破茧成蝶Feb 19, 2024 pm 03:27 PMPyInstaller是一个革命性的工具，它赋予python应用程序以超越其原始脚本形态的能力。通过将Python代码编译成独立的可执行文件，PyInstaller解锁了代码分发、部署和维护的新境界。从单一脚本到强大应用程序以往，Python脚本只存在于特定的Python环境中。分发这样的脚本需要用户安装Python和必要的库，这是一个费时且繁琐的过程。PyInstaller引入了打包的概念，将Python代码与所有必需的依赖项组合成一个单独的可执行文件。代码打包的艺术PyInstaller的工
Python 应用的独立宣言：PyInstaller 的自由之路Feb 20, 2024 am 09:27 AMPyInstaller：Python应用的独立化PyInstaller是一款开源的python打包工具，它将Python应用程序及其依赖项打包为一个独立的可执行文件。这一过程消除了对Python解释器的依赖，同时允许应用程序在各种平台上运行，包括windows、MacOS和linux。打包过程PyInstaller的打包过程相对简单，涉及以下步骤：pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile选项创建一个单一
PyCharm教程：如何将Python代码打包成EXE文件Feb 21, 2024 pm 12:12 PM在本文中，我们将介绍PyCharm中的一种常用方法，通过使用PyInstaller将Python代码打包成可执行的EXE文件。PyInstaller是一个用于将Python应用程序转换为独立的可执行文件的工具，它可以将Python代码打包成EXE、APP、Linux等格式，方便用户在没有安装Python解释器的环境中运行Python程序。步骤一：安装PyIn
如何正确理解 Linux 中打包和压缩的不同之处Feb 20, 2024 pm 05:33 PMLinux中打包和压缩是经常用到的操作，但许多用户往往混淆这两者的概念。本文将详细讨论在Linux系统中打包和压缩的不同之处，并通过具体的代码示例来帮助读者更好地理解。首先，需要明确打包和压缩的区别。打包是将多个文件或目录组合成一个单独的文件，通常用于整理、归档或传输文件。而压缩是将一个或多个文件通过算法进行压缩，以减小文件的大小，节省存储空间或加快传输速
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
