概要
絶対パスでimportしたい。
import Post from '../../components/Post'
↓
import Post from 'components/Post'
やり方
.envの設定
.env
の中を下記のようにすることで、Webpack側でaliasが効くようになります。
NODE_PATH=src
ref) https://github.com/facebook/create-react-app/issues/2188#issuecomment-302040874
.tsconfigの設定
これだとTypeScript側が認識してくれないため、.tsconfig
でもpathを貼る必要があります。
tsconfig.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"*": [ "*"]
}
}
しかし、ただ書き加えてもreact-scripts start
すると消されてしまいます...。
どうやらreact-scripts
が勝手に消してくるらしい。
そのため別ファイルに定義し、それをextends
することでそれを回避します。
paths.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"*": [ "*"]
}
}
tsconfig.json
{
"extends": "./paths.json",
...
}
おわり
これで絶対パスで読み取れるようになりました!
import Post from 'components/Post'
Webpackerもそうですが、こういうのは導入は便利でも改変しづらいのが面倒ですね。
生が一番です。
Comments