Meaningless Notebook

webpack.config.js

const extensionConfig = {
 ︙
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/includes'),
    },

    extensions: ['.ts', '.js'],
  },
 ︙
};

module.exports = [extensionConfig];

設定したいエイリアスを追記する。

VSCode の拡張機能開発で使用した設定ファイルなので『extensionConfig』となっているけど他のプロジェクトにも流用出来る筈。

Webpack 向けは上記設定のみで完了。

Webpack の方は一つの JS ファイルにバンドルしちゃうから問題にならないんだけど、TypeScript は複数のファイルのままなので

import { MyComponent } from '@/components';

が、

import { MyComponent } from  '../../../components';

という風に変換されてくれないと各ファイルが正常に動作してくれない。

なので色々と追加でインスト－ルする必要がある。

ts-patch、typescript-transform-paths インスト－ル

下記コマンドを実行して ts-patch、typescript-transform-paths をインスト－ルする。

yarn add -D ts-patch typescript-transform-paths

tsconfig.json の修正

{

 ︙
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/includes/*"]
    },
    "plugins": [{ "transform": "typescript-transform-paths" }],
  },
 ︙
}

設定したいエイリアスを追記する。

トランスパイルの実行コマンドを変更

トランスパイルを tsc で実行しているのをインスト－ルした ts-patch で行うように修正する。

"watch-tests": "tsc -p . -w --outDir out",

から

"watch-tests": "tspc -p . -w --outDir out",

に修正する。

これでテストコ－ド実行も動作するようになる。