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
- Stop parcel
- Update .babelrc
{
"presets": [[
"env", {
"modules": false
}
]]
}
- Clear the parcel cache (rm -rf .cache)
- percel コマンドで開始
- Open http://localhost:1234
まとめ
細かいことまでは僕は調べなかったのですが(そこはすごい人達に任せます)、これでとりあえず使えるようになりました。
⬇🙏よかったらシェアお願いします🙏⬇
Nobuyuki Ukai
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから