# ベースコンポーネントの自動グローバル登録

# 基本的な例

多くのコンポーネントは割と一般的なもので、あるいは入力やボタンをラップするだけのものかもしれません。わたしたちは、このようなコンポーネントを ベースコンポーネント と呼ぶことがあって、コンポーネント全体に渡ってとても頻繁に使われる傾向があります。

その結果、多くのコンポーネントはベースコンポーネントの長いリストに含まれていることがあります:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
1
2
3
4
5
6
7
8
9
10

テンプレート内の比較的小さなマークアップをサポートするためだけのものです:

<BaseInput v-model="searchText" @keydown.enter="search" />
<BaseButton @click="search">
  <BaseIcon name="search" />
</BaseButton>
1
2
3
4

幸いなことに、webpack(または Vue CLI (opens new window)、これは内部的に webpack を使っています)を使う場合、これらのとても汎用的なベースコンポーネントだけをグローバルに登録するのに require.context を使うことができます。このコード例は、アプリケーションのエントリファイル(例えば src/main.js)でベースコンポーネントをグローバルにインポートするのに使えるでしょう:

import { createApp } from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
import App from './App.vue'

const app = createApp(App)

const requireComponent = require.context(
  // コンポーネントフォルダの相対パス
  './components',
  // サブフォルダ内を探すかどうか
  false,
  // ベースコンポーネントのファイル名とマッチさせるための正規表現
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // コンポーネント設定の取得
  const componentConfig = requireComponent(fileName)

  // コンポーネントのパスカルケースでの名前を取得
  const componentName = upperFirst(
    camelCase(
      // フォルダの深さに関わらずファイル名を取得
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  app.component(
    componentName,
    // `.default` にあるコンポーネントのオプションを探す。
    // コンポーネントが `export default` でエクスポートされていれば存在して、
    // そうでなければモジュールのルートのフォールバックする。
    componentConfig.default || componentConfig
  )
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41