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

静的解析ツールについて

  ある程度の規模のプロジェクトだったら使っているであろう静的解析ツールについて。 Contents1 PHP CodeSniffer2 JavaScript eslit3 C# Style …

no image

プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

JSがらみでちょっとした小ネタを。 Contents1 プルダウン連動2 動的要素へのイベント追加(ライブラリのイベントなど) プルダウン連動 大カテゴリ→小カテゴリなどとあった場合に、新規だけではな …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

アーカイブ