何のために
パーセルは、小規模プロジェクト向けのソリューションとして位置付けられている小さくて高速なバンドルです。 最初のリリース（7日前）以降、githubで8725個の星を既に収集しています。 公式文書によると、次の利点があります。
迅速な組み立て
パーセルは、マルチスレッドビルドにワーカープロセスを使用し、独自のファイルキャッシュを使用して、以降の変更時に迅速に再構築します。
すべての資産を収集します
すぐに使えるのは、ES6、TypeScript、CoffeeScript、HTML、SCSS、スタイラス、生ファイルのサポートです。 プラグインは必要ありません。
自動変換
すべてのコードは自動的にBabel、PostCSS、PostHTMLを通過します-必要に応じてnode_modulesから取得されます。
不要な構成なしのコード分離
ダイナミックインポート（）を使用して、Parcelはバンドルを分割し、アプリケーションエントリポイントのクイックブートストラップを有効にします
ホットリブート
設定なしの一般的なホットリロード-変更を保存すると、ブラウザに自動的に適用されます。
わかりやすいエラー出力
エラーが発生すると、発生したコードが強調表示されます。
ベンチマークはメインページにも記載されています。
| バンドラー | 時間 |
|---|---|
| browserify | 22.98年代 |
| ウェブパック | 20.71s |
| 小包 | 9.98年代 |
| 小包-キャッシュ付き | 2.64秒 |
仕事の仕組み
ParcelのアプローチはWebpackのアプローチに似ています（新しいものを思い付くのは困難です）。
エンティティ-Assetがあります。 アセットは任意のファイルです。 作業の仕組みは次のとおりです。ファイルをASTに変換し、すべての依存関係を解決し、必要な変換を適用し、結果のコードを生成するためのロジックを提供するインターフェイスが実装されます。 すぐに使えるアセットの作業に満足していない場合や、独自のアセットを追加したい場合は、複雑なことは何もありません 。
次はパッケージャーです。 パッカーはアセットを最終的なバンドルに接着します。 これは、ツリーを処理して正常に構築した後に発生します。 パッカーは、ファイルタイプに基づいて登録されます。 パッカーを書きたいですか？ ここであなたに 。
Parcelがpackage.jsonから取得するプラグインを作成することもできます。 これを行うには、プラグインパッケージ名にparcel-plugin-
が必要です。 しかし、これはすでに非常に特殊なケースであり、Webpackまたは別の便利なツールに切り替える必要があるという事実につながる可能性があります。
実際に
パッケージを配置し、パッケージマネージャーを使用してアプリケーションを初期化します。
$ yarn global add parcel-bundler $ mkdir parcel-test && cd parcel-test $ yarn init -y
たとえば、Preactでhello worldを作成します。 次の構造を作成します。
parcel-test ├── package.json ├── src │ ├── app.jsx │ ├── components │ │ └── clock │ │ └── Clock.jsx │ └── index.html └── yarn.lock 3 directories, 5 files
また、必要なパッケージをインストールします。
$ yarn add preact babel-plugin-transform-react-jsx postcss-modules autoprefixer
Babelを構成するには、次の内容の.babelrcを作成します。
{ "plugins": [ ["transform-react-jsx", { "pragma":"h" }] ] }
PostCSSの場合：
{ "modules": true, "plugins": { "autoprefixer": {} } }
自動接頭辞の場合：
> 1% last 2 versions
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parcel demo</title> </head> <body> <script src="./App.jsx"></script> </body> </html>
App.jsx
import { h, render } from 'preact'; import { Clock } from './components/clock/Clock'; render(( <div> <h1>It works!</h1> <Clock /> </div> ), document.body);
Clock.jsx
import { h, Component } from 'preact'; import styles from './Clock.css'; export class Clock extends Component { constructor() { super(); this.state = { time: Date.now() }; } componentDidMount() { this.timer = setInterval(() => this.setState({ time: Date.now() }), 1000); } componentWillUnmount() { cleanInterval(this.timer); } render(props, state) { let time = new Date(state.time).toLocaleTimeString(); return <span className={styles.clock}>{ time }</span> } }
Clock.css
.clock { color: green; }
そしてそれだけです。 ご覧のとおり、.babelrcと.postcssrcを除き、構成ファイルの作成に1分もかかりませんでした。
まとめると
私たちの前には一種の「最小限のWebpack」があり、小規模なプロジェクト用の作業環境を迅速に展開する機能を提供します。 テクノロジースタックは基本的に標準のアセットセットのみに制限されていますが、いつでも独自のアセットで拡張できます。 Babelの完全なサポートを考えると、他のほぼすべてのフレームワークまたはライブラリを簡単に使用できます（ES6でネイティブツールを使用せずに記述するのはアマチュアタスクであるため、Angularに問題がない限り）。 。
不便な点は、今のところ1つだけですbaseUrl
を使用する場合、バンドラーはtsconfigファイルで指定されたユーザーパスとベースディレクトリ（セクションbaseUrl
およびpaths
）を考慮せず、したがって、インポートされたモジュールのパスを通常は解決できません。 github はこの問題の解決策を議論しています。