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
    }
    ]]
    }
  3. Clear the parcel cache (rm -rf .cache)

  4. percel コマンドで開始

  5. Open http://localhost:1234

まとめ

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

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus