ドキュメントの jquery path example と非常によく似たことをしようとしていますが、TSはTS2307
をスローし続けます(webpackは正常にコンパイルされます)。
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@client": [
"client",
],
"@suir": [
"../node_modules/semantic-ui-react/dist/commonjs", // not working
],
},
// …
},
"include": [
"*.d.ts",
"client/**/*",
"../node_modules/semantic-ui-react", // is this necessary?
],
baseUrl
を"."
に変更し、includes
とpaths
を更新しても違いはありません(@client
は引き続き機能し、@suir
は引き続き機能しません)。
"@suir"
を"@suir/"
または"@suir/*"
に変更(およびその値に/*
を追加)しても違いはありません。
これを行う理由は、インポートを単純化するためです(ベンダーバンドルサイズを削減するためにバンドルから名前付きエクスポートをプルする代わりに明示的に指定します。約1 MB節約されます)。
import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works
import Button from '@suir/elements/Button'; // not found
なぜこれが私が試みた11回目に取り組んでいるのか分かりません(まだ最初の10はしませんでした)が、/*
は秘密のソースのようです。ドキュメントの例では、特定のファイルを指しているようです(ファイル拡張子は省略されています)。
{
"compilerOptions": {
"baseUrl": "./src",
"moduleResolution": "node", // was not set before, but is the default
"paths": {
"@client/*": [
"client/*",
],
"@suir/*": [ // notice the `/*` at the end
"../node_modules/semantic-ui-react/dist/commonjs/*", // notice the `/*`
],
},
// …
},
"include": [
"./src/client/**/*",
],
}