Question

我有一个应用程序，我必须使用babel构建代码并做出反应。该应用程序将使用gulp和webpack构建，以实现自动构建和部署。当使用gulp和webpack将babel + react代码转换为浏览器可解释代码时，我们需要使用npm安装react并且必须在所有文件中导入，以下是示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './helloWorld.jsx';
import HelloMe from './hello-me.jsx';

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app-test')
);

ReactDOM.render(
    <HelloMe />,
    document.getElementById('app-container')
);

现在，问题是这个代码与webpack捆绑在一起时，bundle会对库文件代码做出反应并做出反应。因此，我无法将这些库文件缓存到不同视图中加载。因此，相同的库代码将在不同的捆绑文件中反复加载。 有没有办法单独加载这些文件，而不是在捆绑文件中？

Answer 1

编辑您的Wabpack配置文件并指定React＆amp; ReactDOM作为外部。

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
},

然后，包括React＆amp;来自CDN的ReactDOM或您喜欢的来源。

无论何时调用import React from 'react'或require('react')（或react-dom），Webpack都会为您提供库的外部副本

当使用babel，webpack和gulp作为构建工具时，有没有办法单独加载反应库文件而不是捆绑文件？

1 个答案: