Native ESM 時代のフロントエンドビルドツールの動向
No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue
webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
WebPackでnodeランタイム向けにビルドする | // sakura note
前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。 当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。 やりたかったこと TypeScriptでsocket.ioを使ったソケットサーバーを書きたい 変更検知でビルド自動化したい glup/grunt抜きでWebPackでやりたい 環境 Mac OS X El Capitan node.js v5.7.1 / npm v3.6.0 TypeScript v1.9.0-dev.20160312 typings v0.7.9 webpack v1.12.14 上3つのモジュールは npm でグローバルインストール
TypeScriptチュートリアル -環境構築編- - Qiita
【お知らせ】webpack-dev-serverの起動方法が変わったため少し修正しました(2021/10)。編集リクエストありがとうございました。 はじめに この記事は、JavaScriptからTypeScriptにそろそろ移行したい方向けに書いています。JavaScript自体がちょっとあやふやでも他のオブジェクト指向系の言語の経験があれば理解できるように書いていきます。 TypeScriptとは TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。その特徴は、大規模なアプリケーションの開発に耐えるように、(C++やJavaなどの)クラスベースのオブジェクト指向プログラムの機能や、変数への静的な型の指定などを取り込んで、設計されています。それはJavaScriptの標準仕様であるECMAScript2015以
webpack.config.jsがわからない - Qiita
webpack.config.jsがいつまでたってもわからない Javascript開発には欠かせないwebpackですが、webpack.config.jsファイルの書き方がいつまで経っても検索&コピペばかりで身に付きません。別にコピペでいいじゃんという考え方もありますが、webpackのドキュメントに沿って設定内容を理解し、自分の環境に合わせた形でwebpack.config.jsが書けるようにまとめていきたいと思います。バージョンは3.8.1の想定です。ディレクトリ構成も考えながらやっていきたいと思います。今のところprojectディレクトリ以下に次のようにファイルが存在しているとします。
Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法
Babel7.4.0 から、長いことお世話になってきた @babel/polyfill が非推奨となりました。加えて、@babel/preset-env と @babel/ransform-runtime が core-js@3 に対応したようです🎉 これらに伴いpolyfill周りの設定方法が変わったので、その内容をメモしておこうと思います。 Babel と core-js の関係のおさらい これからのpolyfill設定方法 1. preset-env と useBuiltIns:usage で必要なpolyfillだけ読み込む方法 2. preset-env と useBuiltIns:entry で全polyfillを読み込む方法 3. transform-runtime を使う方法 Proposal の使い方 参考 Babel と core-js の関係のおさらい Babelが
Webpackerが提供しているコマンドの内部処理を追ってみた - Qiita
食べログ Advent Calendar 2019 24日目の記事です。 はじめまして。 好きな筋トレはバーベルシュラッグ。 好きな小説家は宮内悠介。 食べログのフロントエンドチームに所属している@sn_____です。 クリスマスイヴなのでWebpackerの話をします。 皆さんWebpacker使ってます？ 個人的にはWebpackerは好みではありません。 Webpackerは面倒なwebpack回りの設定をやってくれるので、Railsアプリケーション開発では重宝されるケースも多いと思います。 しかし、提供されるコマンドの内部処理はブラックボックス化されており、詳細を把握していない人も多いのではないでしょうか。 フロントエンドエンジニア的にはそこらへんも抑えておきたいので、Webpackerが提供しているコマンドの内部処理を調査してみました。 調査対象 webpacker@4.2.2(
Webpacker使うなら最低限これだけは知っておいてほしいこと - Qiita
言いたいこと webpackをあまり知らない人がwebpackerを用いることで簡単に導入できるけど以下のことはちゃんと知っておいてほしかったり、考えてほしい。（切実） ビルドはRubyからコマンド実行してるけど、実際に発行しているnpm scriptはwebpack(-dev-sever) --config config/webpack/(development|test|production).jsなんで覚えておけ。 デフォルトでmultiple entryになっているのでSplitChunksPluginかCommonsChunkPluginの設定はとりあえず入れておけ。 本当にwebpackerは必要ですか？時期が来たら捨てろ。 webpackerの落とし穴 昨今では当たり前となっているwebpackの導入をwebpackをあまり理解していない人が簡単に入れれるという特徴がある。こ
Kotlin/JS の現状を確かめる - Qiita
Kotlin は 1.1.4 を使って試行錯誤した上で、1.2.0 でも動作することを確認しました。その他諸々のバージョンは build.gradle で確認できます。 成果 調査結果のまとめを述べておきます。 JavaScript ライブラリは容易に使えるが、型の付与は手動 アノテーションを付与すれば JavaScript ライブラリを参照できる React のラッパーは JetBrains さんが提供している ts2kt という TypeScript の型定義を Kotlin コードに変換する公式(?)ツールはあるが、ツライ 生成された Kotlin コードは Deprecated だらけ dynamic 型が多く、型チェックされない ビルド環境に kotlin-frontend-plugin という公式(?) Gradle プラグインはあるが、ツライ kotlinconf-app で
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
# CommonJS と ES6の import/export で迷うなら - Qiita
はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが
Webpackでライブラリを作る - Qiita
npmには多数のライブラリが存在しますが、自分でライブラリを作ろうとしたところ、正しい設定にたどり着くまでにちょっと手間取りました。 ライブラリの特徴 ブラウザやNode向けのプロジェクトの場合、ビルドした後は読み込んで使うだけなので、外部との関係性を考える必要はそこまで大きくありません。一方で、ライブラリの場合は、 ライブラリを読み込む側との連携（CommonJS、ES6 Module、AMD、UMD） ライブラリ内で使うライブラリの切り離し（そのままにすると、他のライブラリを取り込む形となってしまい、あとで依存ライブラリを差し替えることができなくなる） といった処理が必要となります。ただ、これらはWebpackでも実現できます。 ライブラリモードの利用（&エクスポート） まず、Webpackをライブラリのビルドに使いたい場合、output.libraryに名前を指定します。この名前は、
webpack-serve が v1 になっていた - 備忘録β版
webpack-serve が ^1.0.0 になっていました。 www.npmjs.com 少し触ってみたので、気づいた点について書いていきます。 （以下は v1.0.2 時点の内容になります） mode の扱い 以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記述する方法を非推奨としているので、webpack 4 から導入された --mode を設定ファイル内で参照する方法が無いと記述していました。 yami-beta.hateblo.jp この mode の扱いですが、現在は README に記載されているように WEBPACK_SERVE という環境変数を参照して切り替える方法が示されています。 { mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜JavaScriptwebpack はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提
webpackとwebpack-serveで静的なWeb環境を作る(deprecated) - Qiita
webpack-serve さん。メンテモードに入った webpack-dev-server の後継らしいのですが周りであんまり使っている人がいないので、自分が手元で使っている最低限の構成を書いておきます。 追記: webpack-serve も 2系にバージョンアップし、細かいところで挙動が変わっていたりするので、なるべく公式ドキュメントをあたってください。 追記: webpack-serveは開発が止まり、webpack-dev-server の開発が再開しました。したがってwebpack-dev-server を使っていきましょう。 インストールする webpack.config.js を作成する webpack4からは設定ファイルがなくても動くが、コマンドラインオプションで bind とかいっぱい書くと package.json のスクリプトがでかくなってコミット差分が読むのつらい
webpack-serve試してみたメモ - hinosita's diary
webpack-serve webpackの開発用web serverとして webpack-dev-server が多く利用されていると思う（webpackの公式にも記載されてるし）のですが、webpack-dev-server は、現在メンテナンスモードのみとなって機能追加等は今後行われない模様です。 代替として webpack-serve を利用するのが良いと記載されてます。ただし、古いブラウザでテストする場合には webpack-dev-server 利用する。 github.com webpack-serve github.com webpack-serve をインストールする yarnの場合 yarn add webpack-serve -D npmの場合 npm install webpack-serve -D webpack-serve をauto-reloadの設定をする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
core-jsを読み込んだけど、IE11で"Exception thrown and not caught"というエラーが発生する - Qiita
今時のフロントエンド開発2017 (3. webpack編) - Qiita
