投稿日:

React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには

TypeScriptで記述しているReactアプリケーションをWebpackでビルドしている開発環境で、jQueryライブラリをあわせて使う構成について調べたことをまとめてみました。

ここでは、前回の記事 「TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ」で構築したプロジェクトに、jQuery Bootstrapを追加してみます。

jQueryは、TypeScriptのコンパイルはimportで通りますが、そのままでは、jQueryがbundle.jsに含まれません。
jQueryをbundle.jsに含めるためには、ProvidePluginを利用することで解決できます。
また、jQuery本体については、CDNからjsを含めても依存の問題は発生しにくいので、scriptタグで指定してしまうのが良い気もします。

ReactでBootstrapを使いたい場合は、React-Bootstrapを使うほうが筋が良いと思いますが、ここではあえて本家のBoostrapを利用してみます。

パッケージのインストール

jqueryとbootstrap、その型定義をインストールします
また、bootstrapのPopoverはpopper.jsに依存しているのでpopper.jsも追加しておきます

$ npm install --save jquery @types/jquery bootstrap @types/bootstrap popper.js

“React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには” の続きを読む

投稿日:

React x SCSS x Webpack開発環境セットアップ手順まとめ

スタイルシートをSCSSで、JSはES6で記述するReactJSのアプリケーションを、Webpackでビルドする手順についてまとめてみました。

スタイルシートはバンドルされたJSに含めず、ExtractTextWebpackPluginを利用してファイルを分けるようにしています。

この記事を試したnodeのバージョンは以下の通りです

$ node -v
v6.9.4
$ npm -v
3.10.10

プロジェクトの構成とnpmの初期化

プロジェクトのディレクトリ構成は以下のようにします

“React x SCSS x Webpack開発環境セットアップ手順まとめ” の続きを読む

投稿日:

TypeScript,WebPackを利用したReact開発環境セットアップまとめ

TypeScriptの公式チュートリアル React & Webpack · TypeScriptをベースに、TypeScriptで記述したReactJSアプリをWebpackでビルドする開発環境の構築手順についてまとめています。

nodeのバージョン

この記事では、以下のバージョンのnode.jsを利用しました。

$ node -v
v8.5.0
$ npm -v
5.3.0

プロジェクトのディレクトリ構成を準備

プロジェクトの構成は、以下のようにsrcディレクトリにReactJSのコンポーネントを置き、distディレクトリをWebpackのビルドターゲットとします。

以下コマンドで、プロジェクトのディレクトリ構成を作成します

“TypeScript,WebPackを利用したReact開発環境セットアップまとめ” の続きを読む