前回、webpack + TypeScriptの構成でChrome拡張の開発環境を構築しました。
ただ、DOMを拡張機能側で動的生成したりするよう場合、TSXで書きたいなァ…🤤という思いから構築してみました。
動作環境
- OS: Windows 11 Home 21H2
$ docker --version Docker version 20.10.14, build a224086 $ docker-compose --version docker-compose version 1.29.2, build 5becea4c
GitHub
最終的に構築できたソースコードです。 テンプレート的に使いまわせる形にしていますのでご自由にお使いください。
React + TypeScriptの環境を構築する
React + TypeScriptの環境構築の手順は以下のサイトの内容に沿って構築するのが良いと思います。 code-log.hatenablog.com
かなり分かりやすくまとめてくださっているので、ここでは省略します。
CSS Modulesを追加する
CSSのコンポーネント単位でのカプセル化もしておきたいというモチベーションがあったので、追加してみます。
webpack.config.js
rules
にCSS Modules用の記述を追記してあげます。
style-loader
, css-loader
が未インストールならnpm install --save-dev style-loader css-loader
しておきます。
module.exports = { ... module: { rules: [ ... { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] }, ], },
declaration.d.ts
新規にdeclaration.d.ts
をルートパスに作成し、下記の内容を記述します。
declare module '*.css';
tsconfig.json
先ほど作成したdeclaration.d.ts
をinclude
に加え、コンパイル対象にします。
{ ... "include": [ ... "./declaration.d.ts", ] }
これでコンポーネント側からcssファイルをimportできるようになりました。
ちなみにdeclaration.d.ts
を加えてあげなかった場合、コンポーネントでcssファイルをimportしようとしても、構文エラーになってしまい、ビルドできなくなってしまいます。
コンポーネントからcssファイルを読み込む
あとは通常のCSS Modulesの使い方通りにimportし、classNameの指定時などに参照できます。
Content.css
.foo { background-color: yellow; width: 200px; height: 200px; }
Content.tsx
import React from 'react'; import ReactDOM from 'react-dom'; import styles from './Content.css'; const Content = () => { return ( <div> <div className={styles.foo}>foo</div> </div> ); }; ...
あとがき
快適な開発環境を得られたのはいいものの、まだ具体的な拡張機能案がまとまっていません🤤 そのうち思いついたらやっていこうと思います。