Parcel のどうということはない小技集

Parcel のどうということはない小技集:

概要

Parcel で LP のような簡単なページを作る際に役立つかもしれない TIPS をまとめてみました。
私のサイトのトップページがまさに Parcel なんですが、機能もへったくれもないので、そういうのを求めている方向けではありません。

小技

古いビルドファイルを削除する

Parcel でビルドすると top.44a62113.js, top.9666360a.js, ... というふうに古いファイルが際限なく残り続けます。

これはもちろんキャッシュ対策であって正しい挙動なんですが、いやそんな残さんでええよ？という時は rm コマンドを npm-scripts の prebuild かビルドコマンドの前に書くと良さげです。

"scripts": { 
  "build": "rm dist/top/* ; parcel build ..." 
} 

案件が軌道に乗ったら「キャッシュを消すビルドコマンド」と「消さないビルドコマンド」の二つに分けて運用すると良いかもしれません。

なお、こちらによると parcel-plugin-clean-dist とか parcel-plugin-clean-easy というプラグインもあるようですが、使う必要あるんでしょうか？わかりません。

index.html を一階層上に移動する

Parcel は何でもかんでも dist フォルダにファイルをビルドしちゃいますが、 index.html だけ上の階層に移動したい、というケースがあるかもしれません。私はありました。

しかし Parcel にそんな気の利いた機能はないので、 mv コマンドで移動する必要があります。

が、そのままだと index.html 内部の相対パスが壊れてしまうため、ビルドする際には --public-url オプションを付ける必要もあります。

例えば、 /top/index.html を /index.html に移動したい場合は以下のようになるかと。

"scripts": { 
  "dev": "parcel ./src/*.html --no-cache --no-source-maps --out-dir dist/top --target browser", 
  "build": "parcel build ./src/*.html --no-cache --no-source-maps --out-dir dist/top --public-url ./top --target browser && mv dist/top/index.html dist/index.html" 
} 

ちなみに parcel ./src/index.html とした場合は http://localhost:1234/ でページが表示されますが、 parcel ./src/*.html とワイルドカードを使った場合は http://localhost:1234/index.html と明示的にファイル名を指定しなければページは表示されません。

Sass を使う

どこにでもある情報ですが、 .scss ファイルを JavaScript で import して Parcel を走らせれば自動的に sass パッケージが読み込まれ、 CSS に変換されます。

（ Parcel には Auto-install 機能があるので、手動で npm install するのは避けた方が良いかな、と。）

import './index.scss' 

ちなみに Normalize CSS や Reset CSS を使いたい時は npm i --save normalize.css reset-css で手動インストールし、 JavaScript で import すれば OK です。

import 'normalize.css' 
import 'reset-css' 

上二つの Sass 版を使いたい場合は npm i --save normalize-scss reset-css してから Sass で import する必要がある、のかな？ Parcel 関係ないけど。

@import '../node_modules/normalize-scss/sass/normalize'; 
@include normalize(); 
@import '../node_modules/reset-css/sass/reset'; 

Autoprefixer を使う

これもどこにでもある情報ですが、 package.json と同階層に postcss.config.js を作り、以下のようなコードを書けば autoprefixer がインストールされ、プリフィクスが付与されます。

module.exports = { 
  plugins: { 
    autoprefixer: { 
      browsers: [ 
        'cover 99.5%' 
      ] 
    } 
  } 
} 

Babel を使う

やっぱりどこにでもある情報ですが、 package.json と同階層に .babelrc を作り、以下のようなコードを書けば babel-core と（上記の例では） babel-preset-env がインストールされるので楽ちんです。

{ 
  "presets": [ 
    [ 
      "env", { 
        "targets": { 
          "browsers": [ "> 0.1%" ] 
        } 
      } 
    ] 
  ] 
} 

テンプレートエンジンを使う

Pug (Jade)

お察しの通り、拡張子を .pug にすれば自動的に pug がインストールされ、使えるようになります。

Vue

こちらも npm install は不要です。

JavaScript で import Vue from 'vue' などと書けば vue と関連プラグインがインストールされます。

import Vue from 'vue' 
import Footer from './footer.vue' 
 
new Vue({ 
  el: '#footer', 
  render: h => h(Footer) 
}) 

Google Analytics を（ Vue で）使う

テンプレートエンジンを使わない場合は直に書けば良いのですが、 Vue を使っている場合は vue-analytics を使うと便利です。これも Parcel 関係ありませんが…。
npm i --save vue-analytics で手動インストール後、任意の箇所に下記コードを記述するだけ。

import Vue from 'vue' 
import VueAnalytics from 'vue-analytics' 
 
Vue.use(VueAnalytics, { id: 'UA-XXXXXXXXXX-X' }) // �� TODO: ここ変えて 
Vue.$ga.page() 

ページが複数ある場合は Vue.$ga.page({ page: window.location.pathname }) などとすると良いでしょう。

Vue Router も設定できます…が、 SPA で Parcel を使うのが適切かどうか怪しいので割愛します。

おわりに

Parcel は便利なんですが、かゆいところに手が届かなくてやきもきしますね。ゼロコンフィグの宿命でしょうけど。

あと、いつまでたっても公式ドキュメントに空のページがある… Asset Types の Vue とか。ちょっと不安です。

とはいえゼロコンフィグなバンドラという点ではメジャーな代替ツールもないようなので、期待はしています。