search

jser / report

JSer.info Report System
4 stars 0 forks source link

Next Bundler #1

Closed azu closed 7 years ago

azu commented 7 years ago

webpack 2

webpack 2が正式にリリースされています。

webpack 2のドキュメントは webpack.js.org/ の新しいサイトの方にまとめられています。

Migrating from v1 to v2にマイグレーションガイドがあります。

一部設定の名前が変更されていたり、json-loaderがデフォルトとなっていたり既存のconfigを変更する参考になると思います。

また多くの人は次のパフォーマンス警告にかかると思うので、次の記事を読むと良いかもしれません。

Fusebox

Fuseboxという新しいBundlerツールが登場しました。 実際に試してみると、初回のビルドと再ビルド(.fuseboxのキャッシュあり)どちらも高速です。

基本的に設定はJavaScriptのコードとして書くようになっていて、nodeで実行するだけです。

また、webpackのように設定としてentryポイントを設定するのではなく、ビルドの設定をするFuseBox.initと実際にbudnleするものを決めるfuse.bundleメソッドで分かれています。

const FuseBox = require("fusebox").FuseBox
let fuse = FuseBox.init({
    homeDir: "src/",
    globals: { default: "myLib"},
    outFile: "./out.js"
});

fuse.bundle(">index.js");

そのためコードとして設定を書くgulpとは相性がいいため、公式のサンプルでもgulp内に書いている例を見かけます。

Rollup

Rollupは順調に開発中です。

browserify

browserify自体を機能追加/改善するアップデートはあまり積極的に行われていません。 substack以外にPRをマージするOwnerがいないことに起因しています。

node-browserify 2017-01-31 19-47-37

元々本体に多くの機能があるわけではなく依存するパッケージに機能が分散しています。 しかし、その依存のアップデートが滞りがちであるため、 Issue/PRにはNode.js v6>=で追加されたDeprecated Warningや依存するパッケージのDeprecated Warningを解消する些細なものが多く並んでいます。

先日、14.0.0がリリースされました。 このリリースでは、browserifyが利用するbufferのpolyfillであるfeross/bufferがアップデートされています。 TypedArrayを使う実装になったため、bufferを含んだコードを変換した場合に、IE10以下では動かなくなります。

IE10以下でも動くようにしたい場合は、古いfeross/bufferを利用する必要があります。

$ npm install buffer@4 --save
$ browserify -r buffer/:buffer main.js > bundle.js
azu commented 7 years ago
azu commented 7 years ago

ES modules

MSEdgeとWebKitにES modules(<script type="module">)が実装されています。

ES modulesとNode.js modulesについては細かな挙動の違いなどが存在します。 詳しくは次の記事を読むと良いです。

webpack 2やrollupなどはES modulesのコードを直接扱うようになっています。 ES modulesのブラウザ実装が進むにつれ、ES modulesを扱うツールなども増えてくることが予想されます。 Bundlerはそこへ直接関係するツールであるため、今後の動きに注目していく必要があります。