Parcelで使われてるnpmパッケージ調べてた

Parcel が依存している npm パッケージを調べてみた。なんとなくこういう用途にこういうパッケージ使うのかーという程度。

新しく作るアプリに今話題の Parcel を使ってみようとしたけど Hot module replacement が効かず、Fedora を使っているので inotify に対応してないのでは？ってところから依存パッケージを調べてみた。

HMR が効かない原因は何もわかってない。Node には標準でクロスプラットフォームな fs.watch¹なるものがあるのでそれはなさそう。

きっかけはそんな感じで、流行りのイケてるパッケージはどういう用途でどういうパッケージを使うのかってのを知っておこうと思ったので一通りみてみた。

dependencies

babel-core

Babel のコア。元コードから生成されたコード、ソースマップ、AST を生成したりする。こいつの提供する関数にオプションとして plugin とか preset とかを渡す。

var res = babel.transform(code, options)
res.code;
res.map;
res.ast;

Babel まわりはバージョン 7 でパッケージ名が変わるっぽい。例えば babel-core なら @babel/core になる。今は @babel/core を使うと 7.0.0-beta.34 が手に入る。ほかも例えば babel-preset-react が @babel/preset-react になったりする。

A monorepo, muhahahahahaha. See the monorepo design doc for reasoning.

https://github.com/babel/babel/tree/master/packages

正直またこんなでっかい変更が…という思いしかないが主要パッケージのバージョンを統一してくれるのは良い。

Sadly, this package has no readme. Go write one!

Oops!

package.json の browser フィールドを解決するやつ？具体的にどう動くのかはよくわかってない。

chalk

コンソールの出力に色つけたりするやつ。

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));

console.log(micromatch(['foo', 'bar', 'qux'], ['f*', 'b*'])); 
//=> ['foo', 'bar']

<html>
<head>
    <title>index.html</title>
</head>
<body>
    <include src="component/button/button.html"></include>
</body>
</html>

おわりに

Babel のエコシステムがどんな感じなのかしれたのと、devDependencies が参考になりそうなのでよかったけど、全部書く必要はなかった。。。 😫

File System | Node.js v9.2.1 Documentation ↩

Parcelで使われてるnpmパッケージ調べてた

dependencies

devDependencies

おわりに

Footnotes