Run scripts with visual enhancements like a webpack dashboard
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です.GitHubではmaxmellonで活動しています. 7月より,やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています. 以前は,React製SPAのパフォーマンスチューニング実例という内容で記事を書きました. 今回は同じSPAにおいて,いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます. webpackが,そもそも何のためのツールか,バンドルする理由などについては割愛させていただきます. そういった話は,こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います. Airシフトのアーキテクチャ Airシフトは,React-Reduxで開発されており,かつSSRを行っておりコードの大
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
TL;DR https://github.com/3846masa/memi JSer のためのタスクランナー MEMI ES module で 1タスク 1Function で書ける 依存関係を自動でインストールしてくれる なんで作ったのか きっかけは mimorisuzuko/memi. 要約すると, JavaScript で書けるタスクランナーが欲しい Makefile やシェルスクリプトは,凝った処理を書くのが怠い どのディレクトリでも手間なく使いたい Node.js に関係ないディレクトリで node_modules や package.json を置きたくない タスクで使うモジュールのグローバルインストールは避けたい npm root -g の場所とは別のところに置きたい 既存のタスクランナーと問題点 Makefile シェルスクリプトで書かないといけないので,ちょっと複雑なこ
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
(注:2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき? 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
背景 公式の単体テストでも、ビルドツールありきのテスト環境となっている。 ただ、自分の環境では、webpackなどビルドツールは使用しておらず、Vue.js の単体を使用している。 そんな状況だが単体テストは行いたい。 問題 公式でもwebpackなどを使用しているためか、vueのテストの情報は、ビルドツールありきになっている。 ただ、単体テストのためだけにwebpackを入れるか? となるとそれはそれで、めんどくさい。 ちょろっと作ったvueアプリケーションの整合性が担保できればそれでいいので、できる限り手間をかけずにテストを行いたい。 達成目標 webpackは使わない. jasmine + karma での vue.js の単体テスト ヘッドレスなテスト (phantomjs使うよ) coverageは取れるようにしておく と以上の4点が達成できればOKということにします。 テストを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く