前回: サバイバルTypeScriptを読んだ - t_hazawaの日記
やりたいこと・概要
- TypeScriptになってないが、そこそこJSがモダンなプロダクトがある
- TypeScript を導入したい
- 前回、TypeScript 自体を勉強した
- TypeScript をどう導入するかしらべたぞ
- 大体 webpack で ts-loader
時間まとめ
- (前回までのあらすじ)
- TS自体を学んで 2022-02-23 までにブログにした
- サバイバルTypeScriptを読んだ - t_hazawaの日記
今回
- 2/28-3/7 に組み込み方まなんでいた
- (3/9-3/31 まで評価資料作ってた)
- 今度から、月の最後の2日間を毎月当てようと思う(各月2時間弱)
- 4/1-4/23に続きを学んだ
- 4/24-4/27 にこのブログを書いていたが、その後、4月分の評価資料を作り始めたら、ストップウォッチを使わず、1日にちょこっとずつしか進めなかったので、12日間も評価資料(4月分)を作っていた
- モチベが低い作業はストップウォッチを使わないと本当にほんの少ししかしない(学び)
つまり
- TSの組み込み方の勉強には1ヶ月かかった
勉強したこと (まとめ)
- webpack.js の module: { rules: [ で test で .ts だけを ts-loader に流し込むことができるのだ
- 流し込んだやつを他のJSと一緒にバンドればいいのだ
- 我々の プロダクトは yarn で package.json のことを実行し、そこに "scripts": { "build:prod": "webpack --config webpack.prod.js とかかれてて、webpack を実行してる
- package.json のことも調べた
勉強したこと (詳細)
- 多分、 サバイバル TypeScript には、「tsc コマンドを使えばいいのだ」とだけ書かれていて、 「webpackをこう使うのだ」とまでは書かれて無かったのだと思う
- yarn は 2016年に Facebook が公開したが、 npm と全く名前が似てないのでわかりにくい
- yarn は英語で編糸という意味らしい
- yarn && yarn build:prod みたいなかんじでタスクランナーとして使われる
- 最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
- 頼れるサイト
- webpack に集約するのがナウそう
- 最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
- 頼れるページ
- フロントエンドは使うものが多くて大変
- バックエンドは言語の公式が力を持つけど、フロントエンドはEcmaScriptしかなく、それがみんなのものだから群雄割拠なのかな
- いつも言われること
二度目以降のビルドは、差分ビルドとして時間が大幅に短縮されます。ビルド短縮のため、webpack-dev-serverもしくは後述のwatch機能は必ず利用しましょう。 "start": "webpack serve"
- 頼れる記事その2
typescriptは高度なウェブアプリケーションの開発で使われることが多く、google社内の標準言語として2017年に採用されるなど、注目が高まっています
- @types/three みたいなのをパッケージ読み込みすると、型情報が得られる
- でも、型情報がもとのパッケージ自体に入ってるのもある
- 2通りある箇所が多くて難しい
webpack 5ではデフォルトで、画像はBase64文字列としてJavaScriptにバンドルできます。しかし、TypeScriptで扱おうとすると工夫が必要です。
画像ファイルの箇所でtype: "asset/inline"を指定します。
- プロダクトの webpack.js っっよんでいった
- 今時のwebpackの構成 - Qiita
この構成で、webpack.configを構成するには、webpack-mergeが必要になります。
- optimize-css-assets-webpack-plugin を知った
- rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
- mini-css-extract-plugin
plugins: [ new MiniCssExtractPlugin({ filename: 'htdocs/css/[name].css' // ここで設定するfilenameは出力するファイル名
ローダーは記述順の後ろから前に実行される
- terser-webpack-plugin
- webpackの基本だけどハマりやすいentryの設定と[name] - Qiita
- webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
- babel でも TSの変換はできるけど、 webpack で ts-loaderがいいのかな?流行ってそう
- 3つもパッケージインストールが必要なbabel
- 我々のにも "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] とだけ書かれたbabelrc がある
- 便利なbabel お試しwebアプリ
- webpackとBabelの基本を理解する(2) ―Babel編― - Qiita
- おなじみの後ろから適用するやつ
useBuiltInsにusageを指定すると、必要に応じてPolyfill(代替コード)に変換してくれます。
バンドる前にraw-loaderを使ってそのファイルを変換してくれないかな。
- 後ろからなので、最終的に先頭のものになる
style-loader: CSSを <style>タグでHTMLに埋め込む
node-sass: Sassをコンパイルするためのツール
- sass->css->style で sassを埋めこめるらしい
- style-loaderの画像埋め込みオプション options.url
- import 'file.scss'; って書かないとバンドられないらしい
- どこかでimortしてつなげることが必要ということ (「接点」)
「MiniCssExtractPlugin」を使って分離手術を実施したいと思います。 - 我々も使ってるプラグイン
- 我々のwebpack.common.js にも全くおなじ
- MiniCssExtractPlugin.loader -> css-loader (url:false) -> sass-loader がかかれてた
webpack.config.jsはNode.jsのファイルなのでrequire文です。
- plugins: [ new MiniCssExtractPlugin({ filename: 'htdocs/css/[name].css' とかけば、 このPluginが補足したものがそっちに図れる
- webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う - 30歳からのプログラミング
- 最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA に戻ってきた
use: 'ts-loader', らしい npm i -D webpack webpack-cli typescript ts-loader みたいなのが要るらしい
- husky
- git commit にフックするもの
- 必ず使われる、というほどには普及してはなさそう
Jest 編
- TypeScript の単体テストで Jest 使おう - Qiita
- jestは expect(new Greeter('Taro').getMessage()).toBe('Hello Taro'); みたいなかキ方をするらしい
- axios(httpクライアント)を mock
まだ謎なこと
- Jestの運用への組み込み方
次回
- Jest を今のプロダクトのどこに組み込めるか考える
- Jenkins?
- どのように導入しようと考えてるか共有する
- 一箇所で導入してみる