ParcelでPug + Stylus + TypeScriptの環境構築 #parcel

WebPack, Gulp, WebPack+Gulp, Preprosなど色々な環境構築で比較した結果Parcelにたどりつきました。

ソースコード

https://github.com/usu-blog/parcel-pug-stylus-ts

とりあえずクローンしてyarnしたあとyarn devで動きます。

Install

インストールするのもは１つだけです。

yarn global add parcel-bundler

Settings

基本的には、package.json書くだけです。

package.json

{
  "scripts": {
    "dev": "parcel \"pug/**/!(_)*.pug\"",
    "watch": "parcel watch \"pug/**/!(_)*.pug\"",
    "build": "parcel build \"pug/**/!(_)*.pug\""
  },
}

\"使っている理由は以下の記事に書いてます。
- Parcelを使う時にハマったpackage.jsonのscripts

Autoprefixerの設定

postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')({ grid: true })],
}

TSの設定

初心者なんでわからないんでどっかで見つけたtsconfig.jsonも入れときます。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "lib",
    "typeRoots": ["node_modules/@typings"]
  },
  "exclude": ["node_modules"]
}

気になるところ

ブラウザでアクセスした時にhttp://localhost:1234なんですがhttp://localhost:1234/index.htmlのようにindex.htmlまで入れないとindexのファイル表示できないです。

誰か知っていれば教えていただきたいです！