Farmでのalisas指定方法

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

本記事では、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には以下のように記入しておきます。

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

farm.config.tsの設定

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

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での使用例

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

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

Sassでの使用例

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

@use '@comp/variables';

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

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

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

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

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

import something from 'mapgl/src';

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

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:という接頭辞を使用することで、正規表現のパターンにマッチした文字列をキャプチャすることも可能です。

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だけで絶対パスを使用することができます。

注意点

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

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

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

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

©Tsurutan. All Rights Reserved.