かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Webpack

今更の Vite で React + TypeScript のプロジェクト作ってみた

`npm create vite@latest ` コマンドを実行すれば CLI で React + TypeScript なプロジェクトがサクッと作れてすごく凄い!!

TypeScript CDN の jQuery を使いたい

テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました!!!! CDN から読み込まれている j…

Webpack Babel で TypeScript を ES5 にトランスパイルしたい

JS と CSS を HTML テンプレートで読み込んでという化石な環境で開発をしています。 前回は SCSS だけ webpack でビルドする環境を作りました。 今回は Vanilla JS でブラウザ対応を考えながら書くのは流石に DX が最悪なので最低限のトランスパイルできる環…

webpack 5 CSS だけコンパイルしたい

npm script で SCSS をコンパイルしてたのだけれど、環境変数や変数展開などを多用していたら Windows 環境でエラーになりビルド出来ない問題続出してメンテコストが高くなってしまいそうだったので、ざっくり webpack で CSS だけビルドする設定を作成下の…

React create-react-app したプロジェクトで paths alias 使おうとして盛大にハマったメモ

create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…

Webpack production mode の時だけ babel-preset-minify で console.log を消したい

開発中は console.log で色々確認したいけど、ESLint で console.log が残ってるとエラーになるようにしてると、特に雑でいい個人開発だと都度消してってのがメンドイので production の時だけ console.log を削除してしまいたかった。 webpack の uglifyjs-…

webpack v5 npx webpack-dev-server で dev server が動かないにハマる

久しぶりに webpack 環境を作っていて web-pack-dev-server を動かそうとしてハマったのでメモ package.json "devDependencies": { "webpack": "^5.6.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" }, Error: Cannot find module 'webpack-…

CSS Modules やっていき

CSS Modules とゎ? ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…

webpack css-loader と style-loader の違いについて学んだ

CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…

TypeScript で SCSS の変数を使いたい!にハマる 😇

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

Serverless でも DynamoDB を使いたい!

前回までのあらすじ TypeScript な Express を aws-serverless-express で Serverless 化して AWS Lambda にデプロイしました。 データベースを使えるように AWS の DynamoDB に接続できるようにしてみたメモ。 serverless.yml に DynamoDB の設定を追加する…

TypeScript な Express を aws-seveless-express で Serverless にして AWS Lambda にデプロイするまでの記録

TL;DR AWS も Lambda も自分で調べて〜なレベル感なのでなんも分かってません。 とりあえずガチャガチャやってみて、動いてるんじゃね?となったので、そこまでもプロセスをまとめただけのエントリーになります。なので、たぶん超長い記事になってると思いま…

Webpack build 時に環境にに応じた .env を読み込ませたい

前回までのあらすじ resolve.alias を使って環境毎に別のファイルを読み込ませる事ができました。 今回は .env を環境に毎に process.env に入れてビルドする方法をやってみましたの Tofu on Fire dotenv-webpack プラグインを使う dotenv-webpack プラグイ…

Webpack TypeScript な Express アプリを環境ごとに変数を埋め込んで build したい。

前回までのあらすじ Express を TypeScript で書いて webpack で build する構成で作成していて、環境毎に切り替えたい情報を直接バンドルして build したいと思いやって見たメモ。 WHY? webpack をビルドする際に mode や process.env で環境変数を渡せるの…

TypeScript で Express 開発環境を作るぞぃ!

ほぼコレを参考にしています 構成 /app |- /dist # build されたアプリの出力先 |- /src | |- index.ts # express entrypoint |- /webpack | |- base.config.js # 共通設定 | |- dev.config.js | |- prod.config.js |- nodemon.json |- package.json |- tsco…

Webpack .env から変数を取り込んで HTML に渡して使いたい。

API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ JavaScript で .env を使う loadenv を使うと .env ファイルをオ…

Webpack dev-server で root になる URL を変更したい

TL;DR GitHub page で host されてる webサイトが webpack dev-server を使って開発されていたのですが、実際のサイトの URL は example.giyhub.io/repo_name/ だけど、開発環境が localhost/ で root のパスが異なっていて / 始まりのパスが使えず不便だっ…

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

React create-react-app したプロジェクトで stylus を使いたい

React のプロジェクトを作る時に create-react-app とても便利です。 しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…

Webpack 4 で Cannot assign to read only property 'exports' of object エラー

こんにちは、Webpackでのbundle化初心者です。 今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので…

Webpack 4 production モードで console.log を削除したい

gulpでは本番環境用にconsole.logを削除するのにgulp-strip-debugした後にgulp-uglifyでminify化すれば削除できていました。 webpackで、productionモードの時だけconsole.logを削除する方法のメモ 環境 node v10.15.0 webpack v4.29.0 1. UglifyJsPlugin ug…

JavaScript (ES2015) 同じ名前のモジュールをインポートしたい

webpackを調べていた時にwebpackのメリットとして 各モジュールを閉じたスコープにしてまとめてくれるので、モジュール名や変数名が被るのを気にする必要がなくなる というのがありました。 で、同じモジュール名だったりした時、インポートする側はどうする…

今更の webpack 4 導入とbabel使うところまでのメモ。

3年ほど山ごもりをしていて、浦島太郎状態なので、その間に進んだフロント周りのキャッチアップを ちょっとづつ進めています。 今回はwebpackについて、フリーな個人制作が多くgulpで何とかなるしと秘伝のタレ使いまわしていたのですが、JavaScriptのモジュ…