loading...
Cover image for Menghindari import bersarang dengan index.js dan absolute imports

Menghindari import bersarang dengan index.js dan absolute imports

musulton profile image Muhammad Sulton Updated on ・2 min read

Mengimpor basis komponen akan menjadi sangat menyakitkan ketika basis kode Anda tumbuh dan menghasilkan file bersarang yang sangat dalam membuat Anda bingung saat mengambil lokasi komponen dan setelahnya akan membuat kode Anda berantakan. Perhatikan struktur direktori seperti berikut:

App/
   Assets/
      img/
      icon/
   Components/
      Alert/
         Alert.component.js
      Button/
         Button.component.js
   Containers/
      Root/
         Root.container.js
      SplashScreen/
         SplashScreen.container.js
   Navigators/
      AppNavigator.js
   Services/
      NavigationService.js
      UserService.js

Katakanlah Anda ingin mengimpor salah satu komponen dari kontainer
import Button from '../../Components/Alert/Alert.component'
ini akan menjadi sangat berantakan ketika lokasi file berubah dan akan sangat menyakitkan ketika mengimpor dari file yang berlokasi sangat dalam.

Ada beberapa cara untuk mengatasi ini, yaitu:

Menggunakan index.js

Anda membuat file index.js pada setiap direktori, isinya adalah untuk membuat referensi pada setiap file, contoh:

Components/Alert/index.js

export { default } from './Alert.component';

Components/Button/index.js

export { default } from './Button.component';

Components/index.js

export { default as Alert } from './Alert';
export { default as Button } from './Button';

Sekarang menjadi lebih sederhana ketika Anda ingin mengimpor komponen dari kontainer import { Alert, Button } from '../../Components';

Menggunakan absolute imports

Cara lainnya adalah dengan mengatur jalur absolut pada proyek Anda. Ini dilakukan dengan mengkonfigurasi file jsconfig.json atau tsconfig.json di root proyek Anda. Anda dapat membuat file jika belum ada dan tambahkan yang berikut ini:

jsconfig.json / tsconfig.json

{
   "compilerOptions": {
      "baseUrl": "App",
   },
   "include" : [ "App" ] 
}

Disini, kita mengatur baseUrl ke direktori root yang diperlukan sebagai basis impor sehingga Anda dapat mengimpor komponen dengan jalur absolut. Sekarang ketika ingin mengimpor komponen Anda cukup dengan cara import { Alert, Button } from 'Components';.

Kita tidak perlu khawatir lagi tentang jalurnya, ketika Anda memindahkan file dari lokasi aslinya, Anda cukup membuat referensi pada file index.js.

Reference: https://create-react-app.dev/docs/importing-a-component#absolute-imports

Posted on by:

musulton profile

Muhammad Sulton

@musulton

I am a coding program from the Almighty.

Discussion

markdown guide