ES2015のexportをするIndexファイル自動生成

ES2015の import と export はそれぞれ構文が幾つかあってちょっとややこしいネ。

コンポーネントをモジュールで分けてたり、Atomicデザインでコンポーネント設計してるときなど、export default してるファイルを一々 import で呼び出すのが面倒になることがあります。

import Sidebar from '../organisms/Sidebar.vue'
import Header from '../organisms/Header.vue'
...

呼び込むモジュールが増えるととても冗長です。

index.jsにexportをまとめる

そこで、export default したファイルを一旦 index.js で一括で読みこみ、まとめて export するようにしてみます。

index.js

export { default as Sidebar } from '../organisms/Sidebar.vue'
export { default as Header } from '../organisms/Header.vue'

export default でエクスポートしたファイルは export { default } という名前でも受け取れる。default として受け取ったモジュールを名前付きで再度exportし直しています。

上記のような index.js があれば以下のように呼び出し可能です。

import { Header, Sidebar } from '../organisms'

一行で呼び出せるのでとてもスッキリしていい感じですね。さらにコンポーネントの名前は名前付きexportなので、typoのままコンポーネント名を使ってしまうみたいなミスはなくなりそうです。

index.jsを作るのが面倒問題

コンポーネントが追加、移動等の度に index.js を手動で書き直すのは面倒です。なので、ビルド時などにフックして自動生成するスクリプトを作ります。

generate_index.js

const fs = require('fs')

// index作成対象のディレクトリ
const targetDirs = [
  './src/components/atoms',
  './src/components/organisms'
]

// atomsとorganismのindex.jsを作成
targetDirs.forEach(function (dir) {
  // ファイル読み込み
  fs.readdir(dir, (err, files) => {
    if (err) throw err
    const content = makeIndexContent(files)
    fs.writeFile(dir + '/index.js', content, function (err) {
      if (err !== null) console.log(err)
    })
  })
})

// ファイル一覧からexportの文を作る
function makeIndexContent (files) {
  let content = ''
  files.forEach(function (item) {
    const file = item.replace('.vue', '')
    if (file === 'index.js') { return }
    content += 'export { default as ' + file + ' } from \'./' + file + '\'\n'
  })
  return content
}

このスクリプトを例えば npm run dev で dev-server を立ち上げた際に実行する、みたいにしておけば、その度 index.js が更新されるので、間違いがなさそうです。

さいごに

そんな感じで現在のプロジェクトでは運用してますが、本当にこんな力技な事しないといけないのか、甚だ疑問ではある（調べた時にはわからなかった）ので、より良い方法、そもそもなツッコミがあれば是非コメント頂きたい次第でございやす。