Percel で fsモジュールが動かない

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
    }]
  ]
}
  1. Clear the parcel cache (rm -rf .cache)
  2. percel コマンドで開始
  3. Open http://localhost:1234

まとめ

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