copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/01/09

parcel.jsをためしてみました

  • js
  • parcel.js

INDEX

    parcel.jsとは

    【公式サイト】parcel.js
    nodeで動くモジュールバンドラです。

    特徴

    • Blazing fast bundle times(高速・軽量)
    • Friendly error logging(ログわかりやすい)
    • Automatic transforms(自動置換 ※デフォルト設定でよければbabelとか特に設定不要)

    webpackは出力されるコードが膨大&設定が大変だったりで、単純なwebページの構築に導入するのはなかなか腰が重いですが、この点をカバーしてくれるのであれば嬉しいなーということで、npm経由でのjsライブラリ使用を想定しサンプル作成してみました。

    手順

    ①nodeのバージョンは、おそらく8以上が推奨と思われます。5だと動きませんでした。
    ②ターミナルから、グローバルにパーセルをインストールします。
    npm install -g parcel-bundler
    公式サイトTOPにあるサンプルを参考に、Hello World表示用の4ファイルを作成します。
    ※公式にあるものをそのままコピーすると、index.htmlに.main(クラス)のDOMがいなかったりコンソールエラーが出ます。

    # index.html
    
    <html>
    <meta charset="UTF-8">
    <body class="main">
        <script src="./index.js"></script>
        <p>Parcel.jsのTestだよ</p>
    </body>
    </html>
    
    # index.js
    
    // import another component
    import main from './main';
    
    main();
    
    # main.js
    
    // import a CSS module
    import './main.css';
    import $ from 'jquery';
    
    export default () => {
      console.log('hello world!!');
    };
    
    let array = [1, 2, 3];
    $(() => console.log(array[1]));
    
    # main.css
    
    .main {
      /* Reference an image file */
      background: yellow url('./images/background.png') repeat;
      color: color;
    }
    

    ④今回はjqueryの使用もためしたいので、npm経由でインストール
    npm install jquery --save
    ④該当ディレクトリに移動して下記コマンドを入力します
    parcel index.html

    ・・・なんとこれだけで、dist/ディレクトリにコンパイル後のアセットたちが出力されました!
    本当に設定ファイルいらない!

    確認はhttp://localhost:1234からおこなえます。parcel実行時に-p <port number>(option)を指定することで任意のアドレスに変更可能なようです。(参考

    所見

    • 設定ファイル、ほぼいらない
    • リアルタイムでbuildしてくれる(ファイル保存時)
    • 高速かつ出力後のファイルもスッキリ
    • エラーの際も、コンソールにしっかりエラー箇所の指摘出てわかりやすい

    npm経由でjQuery使用してみましたが、何もせずともnode_moduleの中身みにいってくれます。
    さくっとLPなど作りたいときにはスピーディかと。

    課題(考察)

    とはいえやはりバンドラーなので、webアプリ向けなのかなという印象を持ちました。
    web向けで使うとすると、出力の際にdist/以下のディレクトリも指定できれば便利なのかな〜というところなのですが、
    packagerのカスタムとかが必要そうな感じかしら。
    設定ファイル不要な分、かゆいところに手が届かない可能性はなきにしも非ず、な感じです。

    サンプルファイル

    こちらからDLできます。(parcel.js v1.4.1)

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View