问题标签 [webpack-externals]

设想：

我想将 React 组件作为独立的 React 应用程序嵌入到网页中。例如，假设一个日期选择器和一个颜色选择器。

我不想为每个独立的捆绑包捆绑 React 或其他常见依赖项两次（或者与我最终使用这种方法一样多次）。我知道我可以使用 webpack externals 来实现这一点。

为什么使用 webpack externals 并不理想

webpack externals 意味着通过脚本标签加载一个版本的 React 并使其作为全局对象可用。在我正在处理的网站的整个生命周期中，我会被卡住：

• 使用一个版本的 React
• 如果我想使用新版本，痛苦地更新所有组件

理想的解决方案

Webpack 将各个应用程序捆绑到它们自己的范围内，如果我打包不同的 React 版本而不将它们放在外部，它似乎可以毫无问题地工作，因为每个实例都是隔离的。

是否有某种方法可以配置 webpack 在运行时查找外部模块（例如，来自 CDN 的特定版本的 React），但最重要的是不将其附加到全局命名空间并将其加载到捆绑代码的范围内？

主要的好处是允许浏览器缓存 React，并避免每次构建新组件时添加相同的下载足迹。

感谢您的时间和考虑。

我想从 CDN 导入 react、react-dom 和其他供应商 JS 库，如 Okta、Jquery，而不是将这些作为包安装到 React 应用程序中。我试图在externals_React is not definedReactDOM is not defined

我正在使用 React - v16​​ 和 Webpack - v3

我为实现这一目标所做的步骤：

1. 移除 react 和 react-dom form package.json 作为依赖
2. 在 html 文件中添加了 cdn url - templates/full-width-template.html

添加externals在 webpack.config - config/webpack.config.prod.js

3. yarn build命令成功运行并创建了包/块。
4. yarn start，只要登录页面可见就抛出错误 -React is not defined : external 1

请建议我如何实现加载 CDN 而不是安装包并将其与 webpack v3 一起使用的功能。

我想从 node_modules 中获取一个模块并且我想捆绑它（出于测试目的），但是 Webpack 的行为就像它被添加到外部一样。

预期行为

path要捆绑的节点模块

实际行为

Webpack 保持require('path');

在我的服务器部分，我可以像这样配置 webpack.config：

这保持不变require('../something')，所以当我修改时，../something.js我不必再次重建服务器部分。

当我服务它时，新的修改会按预期显示。

现在我想为浏览器部分实现相同的想法。

在我的浏览器脚本中，我还需要导入类似的东西

无需向 webpack.externals[] 添加任何内容，它就可以正常工作。但是我想把它外部化，这样我就可以../something.js在编译后修改文件，而无需再次使用 webpack 重新构建它。

我试过了：

我也试过了，amd没有成功。commonjsroot

请注意，“某物”被导入到 .ts 文件中，而不是 .html 文件中，所以我不想像这样实现它<script src="../something.js" />