Question

我已经开始将es6用于项目，并很快发现使用import这样：

import {Account} from 'controllers/account'
import {Activity} from 'controllers/activity'
import {BillingEdit} from 'controllers/billing-edit'
import {BillingSummary} from 'controllers/billing-summary'
import {Billing} from 'controllers/billing'
import {BillingPlan} from 'controllers/billing-plan'
import {Components} from 'controllers/components'
import {Dashboard} from 'controllers/dashboard'
import {Devices} from 'controllers/devices'
import {Feedback} from 'controllers/feedback'
import {Frame} from 'controllers/frame'
import {Help} from 'controllers/help'
import {Login} from 'controllers/login'
import {Membership} from 'controllers/membership'
import {Navigation} from 'controllers/navigation'
import {Notifications} from 'controllers/notifications'
import {Password} from 'controllers/password'
import {Perks} from 'controllers/perks'
import {PlanIssues} from 'controllers/plan-issues'
import {PlanClaims} from 'controllers/plan.claims'
import {PlanContract} from 'controllers/plan.contract'
import {PlanDetails} from 'controllers/plan.details'
import {PlanDevices} from 'controllers/plan.devices'
import {Plan} from 'controllers/plan'
import {PlanTerms} from 'controllers/plan.terms'
import {PlanItems} from 'controllers/plan.items'
import {Plans} from 'controllers/plans'
import {Profile} from 'controllers/profile'

导致冗余，并且将难以维护。

我当然可以通过创建一个通过目录进行递归的任务来动态生成它，但我想知道es6是否有解决此问题的方法

Answer 1

如果您对所有控制器感到满意，那么您可以在index.js文件夹中添加controllers。在其中你会做你在这里做的并包含所有内容，然后你将它作为一个对象的成员重新导出。

<强>控制器/ index.js

import {Account} from './account'
import {Activity} from './activity'
import {BillingEdit} from './billing-edit'
import {BillingSummary} from './billing-summary'

const controllers = {
  Account,
  Activity,
  BillingEdit,
  BillingSummary
}

export default controllers

<强> app.js

import Controllers from './controllers'

// now you can access controllers like this
console.log(Controllers.Account)
console.log(Controllers.BillingSummary)

或者你只能导入你需要的那些

<强> app_alt.js

import { Account, Activity } from './controllers'

console.log(Account)
console.log(Activity)

或者你可以混合和匹配方法

<强> app_mix.js

import Controllers, { Account, Activity } from './controllers'

console.log(Controllers.Account)
console.log(Account)
console.log(Controllers.BillingSummary)

减少es6模块导入语句的冗余

1 个答案: