Percel で fsモジュールが動かない
March 03, 2018

DEVELOPMENT

web
js
parcel
node

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

まとめ

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

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.