Javascript 如何在require.sure的循环中创建常量？

因此，我正在使用

react router

和

require。确保
和webpack将我的路由分块。然而，这导致了大量的样板文件：

const getTermsAndConditions = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('../containers/TermsAndConditions/TermsAndConditions'))
  }, 'terms')
}
const getThread = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('../components/Thread/Thread'))
  }, 'inbox')
}
const getPrivacyPolicy = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('../containers/PrivacyPolicy/PrivacyPolicy'))
  }, 'privacy-policy')
}

我在一行中有大约25个这样的声明，然后在实际的呈现函数中：

<Route path='privacy' getComponent={getPrivacyPolicy} />
...etc

然后
console.log（PrivacyPolicy）
返回：

PrivacyPolicy:  function (nextState, cb) {
  require.ensure([], function (require) {
    return cb(null, require(path))
  }, chunkName)
}

因此，
path
和
chunkName
都没有被它们的实际字符串值所取代…
不幸的是，您不能再减少代码了，因为
require
和
require。确保
必须接收字符串文本，变量将无法工作。它必须在编译时知道，而无需进行程序流分析。这些
getComponent
函数只包含
require。请确保
语句，这样您就无法显式编写它们了


旧答案
你是对的，这是很多样板文件，但是去掉其中的大部分非常简单，因为你几乎用不同的参数复制了相同的代码

在开始编写代码之前，重要的是要知道函数在JavaScript中是一流的公民。这意味着您可以使用函数作为参数，返回值并将其分配给变量，就像任何其他值一样。事实上，这正是您所做的，您使用了一个并将其分配给了一个变量（例如，
getPrivacyPolicy
）。您使用了函数表达式的一种特殊语法（文档中显示了一些差异）。变量只是有一个引用，您可以稍后使用。您不一定需要这些引用，您可以将它们直接传递给
getComponent
属性

记住这一点，你就可以开始重构你的函数了。在您的函数中，除了所需的
路径
和
chunkName
之外，所有内容都是相同的。因此，您将创建一个函数，该函数将
path
和
chunkName
作为参数，并返回一个新函数，该函数将在
getComponent
中使用

const getComponentFactory = (path, chunkName) => {
  // Return the function that will be passed to getComponent
  return (nextState, cb) => {
    require.ensure([], require => cb(null, require(path)), chunkName);
  };
}

现在，您可以通过调用
getComponentFactory
轻松创建已有的函数，例如：

const getThread = getComponentFactory('../components/Thread/Thread', 'inbox');

如前所述，您实际上不需要将此函数分配给变量，但如果您想：

<Route
  path='inbox'
  getComponent={getComponentFactory('../components/Thread/Thread', 'inbox')}
/>

不幸的是，由于
require
和
require，您无法再减少代码。请确保
必须接收字符串文本，否则变量将无法工作。它必须在编译时知道，而无需进行程序流分析。这些
getComponent
函数只包含
require。请确保
语句，这样您就无法显式编写它们了


旧答案
你是对的，这是很多样板文件，但是去掉其中的大部分非常简单，因为你几乎用不同的参数复制了相同的代码

在开始编写代码之前，重要的是要知道函数在JavaScript中是一流的公民。这意味着您可以使用函数作为参数，返回值并将其分配给变量，就像任何其他值一样。事实上，这正是您所做的，您使用了一个并将其分配给了一个变量（例如，
getPrivacyPolicy
）。您使用了函数表达式的一种特殊语法（文档中显示了一些差异）。变量只是有一个引用，您可以稍后使用。您不一定需要这些引用，您可以将它们直接传递给
getComponent
属性

记住这一点，你就可以开始重构你的函数了。在您的函数中，除了所需的
路径
和
chunkName
之外，所有内容都是相同的。因此，您将创建一个函数，该函数将
path
和
chunkName
作为参数，并返回一个新函数，该函数将在
getComponent
中使用

const getComponentFactory = (path, chunkName) => {
  // Return the function that will be passed to getComponent
  return (nextState, cb) => {
    require.ensure([], require => cb(null, require(path)), chunkName);
  };
}

现在，您可以通过调用
getComponentFactory
轻松创建已有的函数，例如：

const getThread = getComponentFactory('../components/Thread/Thread', 'inbox');

如前所述，您实际上不需要将此函数分配给变量，但如果您想：

<Route
  path='inbox'
  getComponent={getComponentFactory('../components/Thread/Thread', 'inbox')}
/>

您甚至可以将
。/components/
部分和模块名称的副本移动到factory@MichaelJungo-这会产生以下错误
require函数的使用方式无法静态提取依赖项
。。。知道为什么吗？@Michael Jungo看起来这是在返回一个没有用字符串替换
path
和
chunkName
的函数。如何生成包含硬编码字符串的函数？很抱歉，我完全忘记了不允许使用动态requires（不能传递
require
变量）。我已经更新了答案。您甚至可以将
。/components/
部分和模块名称的副本移动到factory@MichaelJungo-这会产生以下错误
require函数的使用方式无法静态提取依赖项
。。。知道为什么吗？@Michael Jungo看起来这是在返回一个没有用字符串替换
path
和
chunkName
的函数。如何生成包含硬编码字符串的函数？很抱歉，我完全忘记了不允许使用动态requires（不能传递
require
变量）。我已经更新了答案。当然没有硬编码字符串，闭包就是这样工作的！（您可以通过使用
eval
来解决这个问题，但我想您不需要这样做）。但是，由于您没有声明任何显式依赖项，因此应该能够调整
require
调用以避免警告。“你可能想知道，”贝基我甚至不知道该问什么，你介意解释一下吗