vite, typescript, storybook, jest のエイリアス通すメモ

計４ファイルをそれぞれ修正していく

• vite.config Vite用
• tsconfig Typescript用
• jest.config jest用
• main.cjs storybook用

tsconfig

tsconfig.json

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

vite.config

tsconfig.json

export default defineConfig(() => {
	return {
		...
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src'),
			},
		},
	}
})

jest.config

tsconfig.json

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

公式さん

main.cjs(storybookのエイリアス)

main.cjs

const path = require('path')
module.exports = {
    ...
	viteFinal: async (config) => {
		config.resolve.alias = {
			...config.resolve.alias,
			'@': path.resolve(__dirname, '../src'),
		}
		return config
	},
}

備考

viteのエイリアス設定でこの vite-tsconfig-paths 使ってるサイトをよくみるが、上手くいかなかったので普通に追加した
https://github.com/aleclarson/vite-tsconfig-paths

vite,typescript,jest,storybookと４つまとめて管理できるプラグインあったらええのになあ。