有条件地导入创建-react app中的资产

Question

在使用creating创建React应用程序时，可以有条件地导入资产吗？我知道需求语法-示例：

import React from "react";


const path = process.env.REACT_APP_TYPE === "app_1" ? "app_1" : "app_2";

const imagePath = require(`./assets/${path}/main.png`);

export default function Test() {
  return (
      <img src={imagePath} alt="" />
  );
}

无论如何，这将我所有的资产捆绑在一起。

它将加载适当的映像，但它仍然将所有文件捆绑在一起，在最后的构建。

当我查看开发工具进行最终构建时，我可以看到所有的资产，尽管我只想为app_1加载这些资产。

我是不是被迫去触摸webpack的配置，如果是的话，我应该改变什么？还是有别的办法？

Answer 1

您将需要使用webpack (或其他邦德勒)。代码在捆绑时不运行，因此编译器无法知道要遵循哪个逻辑分支(app_1还是app_2)。因此，你必须进入邦德勒的逻辑，以实现你的目标。

然而，这并不像看上去那么可怕，因为webpack已经具备了这样做的能力(不需要第三方.)

我会考虑使用webpack.providePlugin

(https://webpack.js.org/plugins/provide-plugin)

或者它的兄弟姐妹DefinePlugin

(https://webpack.js.org/plugins/define-plugin)

(恐怕这些例子在我头上都没有了，所以它们不太可能在第一次通过时就起作用。)

示例：

两者都需要一个提供者模块..。

// in path/provider.js

module.exports = {
  live: '/path/to/live/image',
  dev: '/path/to/dev/image'
}

提供插件示例

// in webpack

new webpack.ProvidePlugin({
    imagePath: [
      'path/provider',         // the file defined above
      process.env.ENVIRONMENT  // either 'dev' or 'live'
    ]
  }),

// in code

export default function Test() {
  return (
      <img src={imagePath} alt="" />
  );
}

定义插件示例：

// in webpack

new webpack.DefinePlugin({
  'process.env.ENVIRONMENT': JSON.stringify(process.env.ENVIRONMENT)
});

// in code

var providers = require('path/provider'); // same path provider as above

export default function Test() {
  return (
      <img src={providers[process.env.ENVIRONMENT]} alt="" />
  );
}

在这两种情况下，绑定程序都被迫在编译时将变量折叠为实际的文字值--在进行绑定之前。由于您现在已经将逻辑路径折叠为单个选项，所以现在只可以对相关资产进行打包。

Answer 2

在不存在React的日子里，我们没有将资产放入JS文件中。我们让CSS来决定，为什么选择器加载哪些资产。然后，您可以简单地打开或关闭相应的类，以获取相应的元素(甚至整个页面)，并且它可以更改颜色、背景，甚至表单。纯魔法！

阿。这是什么时候！

以上都是真的，我不明白为什么有人会以不同的方式去做或建议这样做。然而，如果你仍然想做(因为任何原因)-你可以！最新的create-react-app通过动态导入和码分裂为任意组件的懒惰加载提供了开箱即用的支持。您所需要做的就是使用带括号的import()语句版本，而不是普通的语句。import()像往常一样接受一个请求字符串，并返回一个承诺。就这样。动态请求组件的源代码不会捆绑在其中，而是存储在单独的块中，以便按需加载。

以前：

import OtherComponent from './OtherComponent';

function MyComponent() {   
  return (
    <div>
      <OtherComponent />
    </div>   
  ); 
}

后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

注意到 function MyComponent部件是如何相同的。

对于那些想知道它是否与CRA或反应有关的人来说，它不是。可用于香草JavaScript是一个通用的概念。

Answer 3

对于默认的CRA设置，您不能这样做。

因为如果您的动态需要或动态导入路径不是静态，webpack将无法确定在最终构建文件夹中包含哪些资产，因此，它将从./src文件夹获取所有内容，并将它们全部放到build文件夹中。