javascript - 创建类实例并动态注入(inject)

Question

我的项目正在使用 Nuxt，我想实现服务的动态注入(inject)。这意味着我只需将一个类添加到我的特定文件夹，该类将自动注入(inject)到上下文中。

例如，这些是我放在 nuxtApp/service 中的类:

// /service/foo.service.js
export class FooService {
  constructor (context) {
    this.context = context
  }
  
  functionFoo (param) {
    console.log(`FooService.functionFoo: ${param}`)
  }
}

// /service/bar.service.js
export class BarService {
  constructor (context) {
    this.context = context
  }
  
  functionBar (param) {
    console.log(`BarService.functionBar: ${param}`)
  }
}

这就是我的插件目前的样子，但我想自动化它:

// /plugins/service-loader.js
import { FooService } from '../service/foo.service'
import { BarService } from '../service/bar.service'

export default ({ app }, inject) => {
  const fooService = new FooService(app)
  inject('fooService', fooService)

  const barService = new BarService(app)
  inject('barService', barService)
}

是否可以自动加载放置在 /service 文件夹中的服务，然后将它们的实例注入(inject)到上下文中？

Answer 1

你可以使用 Nuxt module至 provide plugins对于 ~/service/*.service.js。该模块将扫描 service/ 目录，并调用 addPlugin()对于每个 .service.js 文件:

// ~/modules/service-loader.js
import path from 'path'
import glob from 'glob'

export default function serviceLoader() {
  glob(path.resolve(__dirname, '../service/**/*.service.js'), { follow: true }, (err, files) => {
    if (err) throw err

    for (const file of files) {
      const exportedMembers = Object.keys(require(file))
      if (!exportedMembers.length) return

      const className = exportedMembers[0]
      this.addPlugin({
        src: path.resolve(__dirname, './service-template.js'),
        fileName: path.basename(file),
        options: {
          className,
          propName: className.slice(0,1).toLowerCase() + className.substring(1),
          moduleName: file,
        }
      })
    }
  })
}

// ~/modules/service-template.js
import { <%= options.className %> } from '<%= options.moduleName %>'

export default ({ app }, inject) => {
  const <%= options.propName %> = new <%= options.className %> (app)
  inject('<%= options.propName %>', <%= options.propName %>)
}

将此模块安装在 modules 下Nuxt 配置中的数组:

// nuxt.config.js
export default {
  modules: [
    '~/modules/service-loader'
  ],
}