Webpackの代わりとなるかと、注目されているpercelですが、まだちょこちょこ厳しいところがあるようです。 es6を使ってますが、babelにてprecompileする際に、問題がありました。 ファイルの操作を行うnode module fs moduleが動かず、とても困りました。

その際の対応方法をメモっておこうと思います。

すでに治ってるかもしれません。（2018-03-03現在）

fs module

これは下記のように、node 環境にてファイルの読み込みや有無、dir以下のファイルを取得する際に使うmoduleですが、percelにてprecompileする際、このfs noduleが正常に認識されず、そのまま出力されてしまうため、ブラウザで認識できない or、percelコマンドでコンパイルする際に下記のようなエラーとなりました。

Oh no, inlining via fs.readFileSync is not working: TypeError: _fs2.default.readFileSync is not a function. (In '_fs2.default.readFileSync(__dirname + '/name.txt', 'utf8')', '_fs2.default.readFileSync' is undefined)

Github上にも結構issue登録されてます。 https://github.com/parcel-bundler/parcel/issues/106

対応方法

対応方法はいくつかあったのですが、僕は下記の方法で解決できました。 parcel-babel-inline-test

1. Stop parcel
2. Update .babelrc

{
  "presets": [[
    "env", {
      "modules": false
    }
  ]]
}

3. Clear the parcel cache (rm -rf .cache)
4. percel コマンドで開始
5. Open http://localhost:1234

まとめ

細かいことまでは僕は調べなかったのですが（そこはすごい人達に任せます）、これでとりあえず使えるようになりました。