我可以使用循环来最小化 ES6 导入语句吗？答案

【问题标题】：Can I use loops to minimize ES6 import statements?我可以使用循环来最小化 ES6 导入语句吗？
【发布时间】：2018-04-17 11:36:03
【问题描述】：

我检查了文档中的“import”，觉得不可能将导入的名称视为数组元素。欢迎提出任何处理这种情况的建议。

import C1 from '../samples/sample1'
import C3 from '../samples/sample3'
import C4 from '../samples/sample4'
import C5 from '../samples/sample5'
import C6 from '../samples/sample6'
import C7 from '../samples/sample7'
import C8 from '../samples/sample8'
import C9 from '../samples/sample9'
......
......
<Route path='/sample1' component={C1} />
<Route path='/sample3' component={C3} />
<Route path='/sample4' component={C4} />
<Route path='/sample5' component={C5} />
<Route path='/sample6' component={C6} />
<Route path='/sample7' component={C7} />
<Route path='/sample8' component={C8} />
<Route path='/sample9' component={C9} />

【问题讨论】：

我猜您可以在构建过程中从目录结构以编程方式创建该文件

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

您不能使用 ES6 导入来执行此操作，因为它们是 static。

这意味着您必须在编译时指定导入和导出的内容，并且不能在运行时对更改做出反应。

使用数组之类的东西意味着必须先运行代码，然后系统才能确定要导入的内容。

目前*（见下文）解决此问题的唯一方法是使用 require CommonJS 方法。

const routes = Array
  .from({ length: 10 }) // create array of 10 elements
  .map((_, i) => require(`../samples/sample${i + 1}`)) // map each element to an imported file using the index
  .map((c, i) => ( // map each component to a route
    <Route
      path={`/sample${i + 1}`}
      component={c}
    />
  ))

您也可以将两个map 循环合二为一：

const routes = Array
  .from({ length: 10 })
  .map((c, i) => (
    <Route
      path={`/sample${i + 1}`}
      component={require(`../samples/sample${i + 1}`)}
    />
  ))

话虽如此，但很可能不是，您可能不需要 10 个不同的示例组件。为什么不使用单个组件并为它传递一个确定其行为的类型，而不是为细微的差异创建单独的组件？

import Sample from './sample'

const routes = Array
  .from({ length: 10 }) // create array of 10 elements
  .map((c, i) => 
     <Route // map each component to a route 
       path={`/sample${i + 1}`}
       component={props => <Sample type={i + 1} {...props} />}
       {/*                         ^ now every sample knows which one it is */}
     />
   )

事实上，您可能也不需要多个路由，并且可以使用带有表示样本类型的动态段的单路由并将其传递给组件。

import Sample from './sample'

<Route path="/sample/:type" component={({ params }) => <Sample type={params.type} />} />

目前有一个proposal 可以为 ES6 模块添加动态导入：

Promise.all(
  Array
    .from({ length: 10 }) // create array of 10 elements
    .map((_, i) => import(`../samples/sample${i + 1}`)) // map each element to a promise resolving to the imported file
).then(components => {  // map each component to a route
  const routes = components
    .map((c, i) => (
      <Route
        path={`/sample${i + 1}`}
        component={c}
      />
    ))
})

【讨论】：

我遵循了您的基于“require”的解决方案，它有效！这就是我想要的！
很高兴能帮助交配。
所有样本都是我用来证明特定解决方案的测试代码，所以我不想将它们合并到一个组件中。一个有趣的发现是我不打算导出现有的 sample2.js但是 webpack 强迫我这样做。我猜 webpack 知道（通过分析代码）我想导出样本，但不够聪明，无法知道我真正打算导出哪些文件。非常感谢你

【解决方案2】：

创建 index.js 用于从一个文件夹中导出所有文件

如果您的组件默认导出，则首先导入您的索引文件，然后导出

从'../samples/sample1'导入c1；从 '../samples/sample1' 导出 c1；

如果你的组件没有默认导出，你可以直接导出

从“../samples/sample1”中导出 *；

然后导入到你想使用的地方

从 '../samples' 导入 { c1, c2 };

它会缩短导入语句

【讨论】：