💭

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

2022/12/01に公開約1,100字

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

  • 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と4つまとめて管理できるプラグインあったらええのになあ。

Discussion

ログインするとコメントできます