服务器端渲染反应应用程序使用可加载组件进行代码拆分
serverside-rendering react app with code splitting using loadable-components
我最近使用可加载组件实现了带有代码拆分的服务器端渲染 React 应用程序
但似乎 loadable-components 本身依赖于 webpack，因为 loadable 用它自己的 reporter 替换了 jsonp_callback。
那么在使用其他打包器（如 rollup、esbuild）时，我们可以使用哪些替代选项？
我们是否必须手动遍历反应树来预先配置哪个组件需要哪个块，除非在服务器端渲染上实现代码拆分时没有特定的打包器目标库（如可加载组件）？
Is tsconfig typeRoots unnecessary?
首先，让我们查阅编译器选项参考：
The documentation for typeRoots 状态（强调我的）：
By default all visible @types packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible. For example, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.
If typeRoots is specified, only packages under typeRoots will be included.
第二行很重要：如果您不设置 typeRoots，那么 tsc 默认会在 node_modules 下查找目录名称中包含 @types 的目录。
（文档没有说明它是否选择 node_modules 因为 moduleResolution 参数。（我怀疑我需要挖掘 tsc的源代码，以确保找到）。）
如果您 为 typeRoots 设置一个值，那么它会覆盖 tsc 的 node_modules/**/@types* 查找逻辑，然后它只会在指定的目录中查找。
As I know, I have to specify the path of the above file into typeRoots option of tsconfig file since typeRoots defaults to look into the node_modules/@types.
不一定。您还可以将额外的打字文件位置添加到 paths 参数并保留 typeRoots 参数 blank/un-set，这意味着 tsc 将保留“node_modules/@types- and-ancestor-walking behavior”，但会看到你的 .d.ts 文件就好了。
此 TypeScript GitHub 线程中提到了这种情况：https://github.com/microsoft/TypeScript/issues/13581
因此，如果您在 您的 机器上询问您的特定本地环境：并假设您坚持规范的、典型的（我敢说 mainstream) TypeScript working idioms (例如使用 npm) 然后 yes: 你可以去掉 typeRoots 参数因为 tsc的（当前）默认行为是在与 tsconfig.json.
相同的位置查找 node_modules 目录
（我知道 VS Code 也可能在幕后拉动一些字符串以使 tsc“意识到”您的项目文件和依赖项及其语言服务器进程 - 但那不应该没关系，因为您会注意到 tsc 应该在 VS Code 之外的命令行中以相同的方式工作。
如果您询问 typeRoots 编译器选项的基本必要性，并且假设您正在考虑 “那是因为实际上每个人 都在使用 npm 和 node_modules 那为什么 TypeScript 团队要花时间支持不寻常的开发配置？”_ - 好吧，有很多很好的理由：工具不应该依赖于第三方控制的其他工具1：考虑一下 npm 生态系统 and/or NodeJS 软件可能在一夜之间过时的可能性，然后我们会被 tsc's defaults still using node_modules when everyone is rockin' 一些新的很酷的 JS 困住环境：多年来解决这个问题会令人头疼（并不是说 JS 生态系统并不像现在这样一团糟）。
不使用 npm 和 node_modules 的理由很多：人们可能在没有互联网访问的环境中使用 TypeScript（想想：安全软件开发、国防工业、国家机密, 等) - 在那些情况下的那些人可能有一个网络共享充满了批准或已知可信赖的库，这些库不会使用 node_modules 的命名约定 - 在这种情况下，如果那些人想使用 d.ts 文件，他们需要为自己手动配置 typeRoots 参数。
1 我知道 npm（在法律上与 NodeJS 是分开的，顺便说一句）由 npm Inc 维护，它是一个子公司微软的（通过被 GitHub 收购，也是微软 属性），所以 tsc 依赖于 npm 不应该 是个问题——但这是最近发生的事情：微软在 18 个月前的 2020 年 3 月才收购了 npm——微软很可能会分拆 npm Inc——或者运行 它进入地面，每个人都切换到 yarn。因此，无论当前流行的任何工具的最终合法所有者是什么，您都不希望出现这样不必要的依赖关系。
我最近使用可加载组件实现了带有代码拆分的服务器端渲染 React 应用程序
但似乎 loadable-components 本身依赖于 webpack，因为 loadable 用它自己的 reporter 替换了 jsonp_callback。
那么在使用其他打包器（如 rollup、esbuild）时，我们可以使用哪些替代选项？
我们是否必须手动遍历反应树来预先配置哪个组件需要哪个块，除非在服务器端渲染上实现代码拆分时没有特定的打包器目标库（如可加载组件）？
Is tsconfig typeRoots unnecessary?
首先，让我们查阅编译器选项参考：
The documentation for typeRoots 状态（强调我的）：
By default all visible
@typespackages are included in your compilation. Packages innode_modules/@typesof any enclosing folder are considered visible. For example, that means packages within./node_modules/@types/,../node_modules/@types/,../../node_modules/@types/, and so on.
If
typeRootsis specified, only packages undertypeRootswill be included.
第二行很重要：如果您不设置 typeRoots，那么 tsc 默认会在 node_modules 下查找目录名称中包含 @types 的目录。
（文档没有说明它是否选择 node_modules 因为 moduleResolution 参数。（我怀疑我需要挖掘 tsc的源代码，以确保找到）。）
如果您 为 typeRoots 设置一个值，那么它会覆盖 tsc 的 node_modules/**/@types* 查找逻辑，然后它只会在指定的目录中查找。
As I know, I have to specify the path of the above file into
typeRootsoption oftsconfigfile sincetypeRootsdefaults to look into thenode_modules/@types.
不一定。您还可以将额外的打字文件位置添加到 paths 参数并保留 typeRoots 参数 blank/un-set，这意味着 tsc 将保留“node_modules/@types- and-ancestor-walking behavior”，但会看到你的 .d.ts 文件就好了。
此 TypeScript GitHub 线程中提到了这种情况：https://github.com/microsoft/TypeScript/issues/13581
因此，如果您在 您的 机器上询问您的特定本地环境：并假设您坚持规范的、典型的（我敢说 mainstream) TypeScript working idioms (例如使用 npm) 然后 yes: 你可以去掉 typeRoots 参数因为 tsc的（当前）默认行为是在与 tsconfig.json.
node_modules 目录
（我知道 VS Code 也可能在幕后拉动一些字符串以使 tsc“意识到”您的项目文件和依赖项及其语言服务器进程 - 但那不应该没关系，因为您会注意到 tsc 应该在 VS Code 之外的命令行中以相同的方式工作。
如果您询问 typeRoots 编译器选项的基本必要性，并且假设您正在考虑 “那是因为实际上每个人 都在使用 npm 和 node_modules 那为什么 TypeScript 团队要花时间支持不寻常的开发配置？”_ - 好吧，有很多很好的理由：工具不应该依赖于第三方控制的其他工具1：考虑一下 npm 生态系统 and/or NodeJS 软件可能在一夜之间过时的可能性，然后我们会被 tsc's defaults still using node_modules when everyone is rockin' 一些新的很酷的 JS 困住环境：多年来解决这个问题会令人头疼（并不是说 JS 生态系统并不像现在这样一团糟）。
不使用 npm 和 node_modules 的理由很多：人们可能在没有互联网访问的环境中使用 TypeScript（想想：安全软件开发、国防工业、国家机密, 等) - 在那些情况下的那些人可能有一个网络共享充满了批准或已知可信赖的库，这些库不会使用 node_modules 的命名约定 - 在这种情况下，如果那些人想使用 d.ts 文件，他们需要为自己手动配置 typeRoots 参数。
1 我知道 npm（在法律上与 NodeJS 是分开的，顺便说一句）由 npm Inc 维护，它是一个子公司微软的（通过被 GitHub 收购，也是微软 属性），所以 tsc 依赖于 npm 不应该 是个问题——但这是最近发生的事情：微软在 18 个月前的 2020 年 3 月才收购了 npm——微软很可能会分拆 npm Inc——或者运行 它进入地面，每个人都切换到 yarn。因此，无论当前流行的任何工具的最终合法所有者是什么，您都不希望出现这样不必要的依赖关系。