skillup

技術ブログ

JavaScript

モジュールバンドラparcelについて

投稿日:2019年12月30日 更新日:

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。

が、私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動いていることから、ビルドしないで直接書いたりすることもあります。

が、先日ある程度レガシーな環境のJSで一部をes6以降の書き方で書いていましたが、やはりIEで動かなかったり、importが使えなかったりとやはり色々と不便なため、モジュールバンドラを入れることに。

と言ってもwebpackが面倒で嫌いなので(汗)、何か手軽に使えるモジュールバンドラを探していたところ、 parcel が検索にヒットしました。

そういえば、職場のリーダーの方に教えていただき、簡単なチュートリアル程度は試して見たことがあります。

私の場合本当に簡単なビルドのみを使いたかったため、ピッタリでした。

インストール

npm install -D parcel-bundler

通常のビルド&監視

利点として、下記の様な点でしょうか。

  • (今回は使いませんでしたが)htmlファイルなどの読み込みファイルを直接引数にして、対象の全アセットを一括ビルドできる
  • 超高速(通常の監視でファイル数が少なければ1秒以内です。)
  • 設定ファイルなどが不要

大規模なソースの構成とかだとまた不便なんでしょうが、手軽に使う分にはこれがいいのではないでしょうか。

https://parceljs.org/

Parcel 入門 ~Parcelはwebpackの代わりになるのか~

 

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …