エイリアスソースコードインポート

インポートパスをオーバーライドするには、2つの方法があります。

tsconfig.json の paths プロパティを使用する
package.json の alias プロパティを使用する

ローカルTypeScriptインポートのエイリアス

ローカルインポートにエイリアスを付けるには、tsconfig.json で paths マッピングを使用します。

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "~*": ["./src/*"],
      "@Components/*": ["./src/components/*"]
    },
    "baseUrl": "."
  }
}

その後、以下のように使用できます。

import { Button } from "@Components/button"
import { Checkbox } from "@Components/checkbox"
import { Header } from "@Components/header"
import { Input } from "@Components/input"

bug-244-alias-local-imports (opens in a new tab) の例を参照してください。

外部TypeScriptモジュールのエイリアス

外部TypeScriptモジュールにエイリアスを付けるには、tsconfig.json の外部ディレクトリを指す paths マッピングを使用できます。

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "coolio/*": ["../../../some-cool-package/*"]
    },
    "baseUrl": "."
  }
}

インポートは次のようになります。

import { hello } from "coolio/hello"

外部インポートのエイリアス

alias フィールドを使用して、インポートパスをプロジェクトの外部のファイルにマップできます。

{
  "alias": {
    "some-cool-identifier/hello": "../../../cool-file.js"
  }
}

TypeScript宣言ファイル cool-file.d.ts でそのインポートも宣言してください。

declare module "some-cool-identifier/hello" {
  export const hello: string
}

そして、そのファイルを tsconfig.json に含めます。

{
  ...
  "include": ["./**/*.ts", "./**/*.tsx", "./cool-file.d.ts"]
}

その後、コードでそれを使用できます。

import { hello } from "some-cool-identifier/hello"

API互換モジュールのエイリアス

package.json の alias フィールドを使用して、API互換モジュールのエイリアスを付けます。ローカルファイルまたは依存関係パッケージにマップできます。

Reactの代わりにPreactを使用する

PreactのAPIはReactと互換性があるため、次のようにエイリアスを付けることができます。

{
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}

Replace the HTML Internal Paths