webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5(2020年10月リリース)以上で解説しています。 本記事で解説しているこ
やること ES2015(ES6)とwebpackを組み合わせて、簡単なWebアプリケーションを作ってみます。 webpack はjsやcssなど、webページで読み込まれる部品の依存関係を解決し、合成してくれるモジュールバンドラーです。 webpackはgulp,gruntなどのタスクランナーと組み合わせて使うことも多いですが、今回は使用しません。 以下の条件を満たすプロジェクトを作成します。 classを継承する classをimportして使用する IE11が対応していない、ES6のPromiseを使う Mac OS X High Sierra Webpack 4.20.2 Node.jsをインストール 必要なモジュールはnpm(Node Package manager)でインストールが出来ます。 まずはNode.jsをインストールします。 brew install node これでn
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略:ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules(impo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く