
本記事では、Rust製でビルド速度が速いことを売りにしているFarmでimportのaliasを設定する方法を紹介します。

## 基本的な設定方法

まず、TypeScriptで`baseUrl`や`paths`を指定しただけではFarmでaliasを使用することはできません。Farmでaliasを指定するためには`farm.config.ts`の設定を変更する必要があります。

Viteでは`Config`直下に`resolve.alias`の設定を追加していましたが、Farmでは`compilation`の中に`resolve`を設定する必要があります。

### tsconfig.jsonの設定

予め、`tsconfig.json`には以下のように記入しておきます。

```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@comp/*": ["./components/*"]
    }
  }
}
```

### farm.config.tsの設定

次に、`farm.config.ts`に以下のように設定を記述します。

```typescript
import { defineConfig } from '@farmfe/core';
import * as path from 'path';
import * as process from 'process';

export default defineConfig({
  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass'],
  compilation: {
    resolve: {
      alias: {
        "@comp": path.join(process.cwd(), "src/components")
      }
    }
  }
});
```

このように設定することで、以下のようなディレクトリ構成があった場合に、`HomeTemplate`は`SampleText`をaliasを使ってimportすることができます。

```
src
├── assets
│   ├── logo.png
│   └── react.svg
├── components
│   ├── HomeTemplate.tsx
│   ├── SampleText.module.scss
│   ├── SampleText.tsx
│   └── variables.scss
├── index.css
├── index.tsx
├── main.css
├── main.tsx
└── typings.d.ts
```

### TypeScriptでの使用例

```typescript
import { FC } from 'react';
import { SampleText } from '@comp/SampleText.tsx';

export const HomeTemplate: FC = () => (
  <div>
    Hello World!!
    <SampleText />
  </div>
);
```

### Sassでの使用例

また、Sassファイルにおいてもこのaliasは適用され、`@use`を使って他のSassファイルを読み込むことができます。

```scss
@use '@comp/variables';

.container {
  background: yellow;
  color: variables.$primary-color;
}
```

## 正規表現を使用したaliasの設定

aliasを部分一致ではなく完全一致の場合のみに適用させたい場合があります。例えば、以下のような設定があったとします。

```typescript
export default defineConfig({
  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass'],
  compilation: {
    resolve: {
      alias: {
        "mapgl": "react-map-gl"
      }
    }
  }
});
```

この設定では、以下のように`mapgl`の内部の階層まで辿れてしまう可能性があります。

```typescript
import something from 'mapgl/src';
```

これを防ぐためには、aliasに正規表現を指定します。以下のように末尾に`$`をつけることで、完全一致のみ適用されるように設定できます。

```typescript
export default defineConfig({
  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass'],
  compilation: {
    resolve: {
      alias: {
        "mapgl$": "react-map-gl"
      }
    }
  }
});
```

この設定により、`mapgl/xxx`という書き方をするとビルドに失敗します。

ただ、これを言っては元も子もないですが、このような制約を与えたい場合は`tsconfig.json`で明示的に書いておくと、IntelliJやVSCodeで編集中に使用できないことがわかります。これらのエディタを使用しているのであれば、`tsconfig.json`で十分かもしれません。

また、`$__farm_regex:`という接頭辞を使用することで、正規表現のパターンにマッチした文字列をキャプチャすることも可能です。

```typescript
export default defineConfig({
  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass'],
  compilation: {
    resolve: {
      alias: {
        "$__farm_regex:^(components|assets)": path.join(process.cwd(), "src/$1")
      }
    }
  }
});
```

このように設定することで、`tsconfig`で`paths`を使わずに`baseUrl`だけで絶対パスを使用することができます。

## 注意点

ただし、以下のような書き方を行うと、特にエラーが吐かれずプロセスが停止してしまうことがあります。

```typescript
export default defineConfig({
  plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass'],
  compilation: {
    resolve: {
      alias: {
        "$__farm_regex:^([^\/]*)": path.join(process.cwd(), "src/$1")
      }
    }
  }
});
```

この点に注意しながら設定を行ってください。

---

このように、Farmを使用してimport aliasを設定する方法を理解することで、開発効率を向上させることができます。ぜひ試してみてください。


Rust製のビルドツールFarmでimportのaliasを設定する方法を紹介。基本設定から正規表現を用いた応用設定まで、具体例を交えて解説します。

Farmでのalisas指定方法

この記事では、Vite.jsに関わる`tsconfig`の設定について説明していきます。これらの設定は、プロジェクトのビルドプロセスや動作に大きく影響するため、適切に設定することが重要です。

### isolatedModules

TypeScriptコンパイラ（`tsc`）は複数のファイルを考慮したトランスパイルを行うため、全体の型情報を元にトランスパイルを行います。しかし、BabelやSWCなどの他のトランスパイラはシングルファイルのトランスパイルを行うため、全体の型情報を元にトランスパイルすることができません。

`isolatedModules`オプションを有効にすると、TypeScriptが正しく解釈できない場合に警告を出すようになります。これは、`tsc`以外のコンパイラでも正しくコンパイルできるようなコードを書くことを強制するためのオプションです。

例えば

```typescript
export type User = {
    name: string;
    age: number;
};
```

という型を定義したファイルがあるが、これを

```typescript
export { User } from './types';
```

とexportしていたとします。
この時 export しているファイルのみをみるとこれが実体を持つオブジェクトなのか型なのか判断がつきません。
このように一つのファイルを見ても判断が付くように、この場合は

```typescript
export { type User } from './types';
```

と type をつけて対応します。


viteではesbuildを使用しており、[esbuildでもファイルを独立してみるため](https://esbuild.github.io/content-types/#typescript)このオプションは必須になります。

```json
{
  "compilerOptions": {
    "isolatedModules": true
  }
}
```

### useDefineForClassFields

TypeScriptのターゲットを`ESNext`または`ES2022`とすると、このオプションは自動的に`true`になります。`useDefineForClassFields`オプションを有効にすることで、ES（ECMAScript）の仕様に沿ったクラスフィールドの初期化が行われます。

例えば下記の様なTypeScriptで書かれたclassがあったとします。

```typescript
class Sample {
    value1 = ""
    value2?: string
}
```

このファイルを `useDefineForClassFields` を `false` でトランスパイルすると



```javascript
"use strict";
class Sample {
    constructor() {
        this.value1 = "";
    }
}
```
となり、 `useDefineForClassFields` を `true` でトランスパイルすると


```javascript
"use strict";
class Sample {
    value1 = "";
    value2;
}
```

となります。結果から分かるようにTypeScriptでは値を格納していない `value2` のプロパティが `useDefinedForClassFields` の値によって、吐き出されない場合があります。
このオプションを有効化することで、例えば `Object.keys(instance)`の挙動などが以前と異なる場合があります。MobXなどの多くのライブラリは`useDefineForClassFields`が`true`であることを前提としていますが、いくつかのライブラリはまだ対応していない場合があるため、注意が必要です。
```json
{
  "compilerOptions": {
    "useDefineForClassFields": true
  }
}
```

### target

Viteを使用する場合、`tsconfig`に記載した`target`オプションよりも、`vite.config.js`に記載した`target`オプションが優先されます。`es2022` 以上でない場合、静的初期化ブロック（static initialization blocks）などのサポートされなくなります。

静的初期化ブロックの例

```javascript
class ClassWithStaticInitializationBlock {
  static staticProperty1 = 'Property 1';
  static staticProperty2;
  static {
    this.staticProperty2 = 'Property 2';
  }
}
```

この場合、ターゲットは`ESNext`や`ES2022`以上のバージョンを指定することが推奨されます。

```json
{
  "compilerOptions": {
    "target": "ESNext"
  }
}
```

### その他の重要なオプション

- `strict`: すべての厳格モードのチェックを有効にします。
- `module`: Viteでは`esnext`が推奨されます。
- `jsx`: Reactを使用する場合は、`react-jsx`や`react-jsxdev`を設定します。

```json
{
  "compilerOptions": {
    "strict": true,
    "module": "esnext",
    "jsx": "react-jsx"
  }
}
```

これらの設定を正しく行うことで、Vite.jsプロジェクトのビルドプロセスがスムーズに進み、開発体験が向上します。プロジェクトの要件に合わせて、適切に`tsconfig`の設定を調整しましょう。

viteで言及されているtsconfigのcompiler optionsについて備忘録として情報を残します。

viteで言及されているtsconfigのcompiler optionsについて

Spring OAuth2のPrincipalをカスタマイズする方法を備忘録としてまとめます。

Spring OAuth2のPrincipalをカスタマイズする方法

Node.js + TypeScriptでどのORMを選択すればよいか調査を行いました。

TypeORM vs Sequelize vs Prisma

TypeScript + Reactで作成するアプリケーションのコード規約を備忘録としてまとめます。

React + TypeScript コード規約

AssemblyScriptから吐き出される WebAssemblyのパフォーマンス計測を行った。

AssemblyScriptのパフォーマンス測定してみた

TypeScript 4.2 の機能についてまとめます。

TypeScript 4.2 の機能について

Leetcodeで感銘を受けた問題集をまとめました。

Leetcodeで感銘を受けた問題集

ReactNativeのアーキテクチャについて簡易的にまとめました。

ReactNativeのアーキテクチャについて

Babelでの成果物をもとに、どうしてそのような変換を行っているのか掘り下げて説明・考察をします。

Babelで見るJavaScriptの世界

A.V.エイホとR.セシィ共著のコンパイラ　原理・技法・ツールでよく忘れてしまう単語を備忘録としてまとめます。

コンパイラ　原理・技法・ツール

React NativeにてCloud Messagingの実装方法についてまとめます。

React Native Cloud Messaging

Firebase Dynamic Links を使用した React Native での Deep Link の実現方法について説明します。

React Native Firebase Dynamic Linksの設定

Atomic Designについてのまとめを書きます。

Atomic Designについて

react-hooksはなぜ生まれ、どのようなメリ・デメがあるのかについて書きます。

React Hooksまとめ

ReactNativeのテスト方法について備忘録としてまとめます。

ReactNativeテストまとめ

createAsyncThunkのテストの書き方についてまとめます。

createAsyncThunkのテスト

weekly-contest-193で出題された5455. Minimum Number of Days to Make m Bouquetsの解説をします。

Leetcode: Minimum Number of Days to Make m Bouquets

tsconfig.jsonについての記事です。

記事一覧