问题标签 [webpack-externals]

我正在尝试使用 webpack 修改当前项目。在我的脚本中，我使用的是 lodash 库，但我也有未在 ES6 上编写的脚本，因此我使用普通脚本标签全局加载 lodash。基于 webpack 文档，我在 webpack ( https://webpack.js.org/configuration/externals/ ) 上添加了以下配置。

我使用 babel 编译代码没有任何问题，但是当执行实际代码时，我收到以下错误“TypeError：无法读取未定义的属性 'forEach'”

如果我import _ from "lodash";从文件中删除该语句，则问题已解决，并且脚本按预期工作，因为 _ 在全局上。

但这在不添加外部组件的情况下也可以正常工作吗？根据 jquery 的 webpack 示例

以下代码将保持不变

在我的情况下为什么不工作？有什么建议么 ？想法？

我在我的electron + reactjs应用程序中使用 webpack。

开发速度非常慢，所以我确实放了外部：[nodeExternals()]

现在dev的速度还可以，但是electron热重载后不刷新页面。我的意思是热重载正在工作，但之后屏幕没有刷新。

我正在尝试开发一个自定义反应组件，我想稍后在 npm 上发布它。我有以下 webpack 配置：

在浏览器中运行时，我得到'require is not defined'. 为什么 webpack 会捆绑 require 语句？如果我从配置中删除外部，一切运行正常。

编辑： 通过在浏览器中运行，我的意思是我已经使用 npx create-react-app 为 lib 创建了一个客户端项目。在那里，我通过导入语句导入了我的包。

我创建了一个需要两个 url 来访问 REST 服务的应用程序（使用 vue 和 webpack）。这些网址因部署而异。所以我真的很想有一个外部配置文件（可能是 JSON）来存储这些 url。

我做了一些研究，发现了 webpack externals。在我的配置文件中添加了外部组件：

test.js 真的很简单 --> 导出默认 {url1 : ' https://bla ', url2: ' https://bla2 '}

从我需要这个文件的 vue 文件中调用：

这会导致我的应用程序显示空白屏幕。控制台和 npm 控制台屏幕中都没有错误。

不知道发生了什么。几个问题：

• 我正在使用开发服务器，不确定将 test.js 文件放在哪里我把它放在这里：__dirname，“./test.js”所以这是在我的构建目录中......
• 我应该像外部库加载一样将它加载到我的 index.html 文件中吗？
• 有人有一步一步的例子吗？网上没找到。。

这应该很简单，但没有任何线索，因为我没有收到任何错误或消息......

任何帮助都会非常有帮助！

我有一个tsconfig.json文件，其中包含paths要在我的打字稿中使用和tsconfig-paths-webpack-plugin供 webpack 使用的文件。但是，其中一个路径引用了位于项目目录之外的共享库。当我尝试将应用程序与 webpack 捆绑时，它会伸出手并适当地获取库并将其添加到包中。有没有办法让它不捆绑这个外部模块，而只是让它在捆绑时调整 require 语句？

我已经尝试externals在 webpack 中的选项中添加一个正则表达式，这样可以防止模块被捆绑。但是，tsconfig-paths-webpack-plugin不会评估 import 语句，它保持@libs/[MY_LIB]在编译代码中，而不是"../../../libs/[MY_LIB]"：

最终目标

我目前正在尝试通过 Webpack 外部外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小型库实现了这一点，没有出现任何问题。

Can't resolve all parameters for ApplicationModule: (?) at at syntaxError (util.ts:100) at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.ts:957) ...如果我只是移动“@angular/compiler”，它也可以工作，但是当外部化“@angular/core”和其他人时，我在引导应用程序时收到错误。

我使用的文件是您可以在 unpkg.com 中找到的 8.2.14 UMD 捆绑包，我的外部文件是：

rxjs 包是在这里找到的包https://cdn.jsdelivr.net/npm/@esm-bundle。

您可以在此 repo 上看到错误：https ://github.com/OriolInvernonLlaneza/test-share-angular

提前致谢！

编辑：感谢 yurzui 的回答，这个错误得到了解决。但是，我现在收到另一个错误：

我有一个微应用元素和一个正常工作的外壳应用程序。但是，我正在尝试构建没有公共库的微应用程序并从全局范围内引用它们。我按照以下教程使用共享库构建角度元素

1. ng g ngx-build-plus:externals
2. npm run build:externals (ng serve --extra-webpack-config webpack.externals.js --output-hashing none --single-bundle)

3. 文件 webpack.externals.js 定义了以下外部

   /li>

4. 在 angular.json 中，有以下脚本

但是现在，该元素没有加载到 shell 应用程序中。它说“ Uncaught ReferenceError: ng is not defined at Object.@angular/core”。我对角度很陌生，我在这里错过了一步吗？看起来 angular.json 脚本不起作用，并且元素（微应用）无法引用全局数组

我目前正在致力于国际化一个使用单水疗（微前端）构建的系统，以及在 Angular 和 React 上编写的应用程序。我开始使用 i18next 并且进展顺利，但是，当我尝试在所有应用程序之间共享 i18next 依赖项时发现了一个问题。

当两个应用程序同时安装在视图上时，最后加载的应用程序会覆盖 i18next 实例，因此永远找不到第一个应用程序的翻译，因为它们没有加载到后者上。

提前致谢！

在我的角度，我jquery从外部加载并且它有效。但是，在 之后build，我得到一个错误Uncaught ReferenceError: jQuery is not defined 。我的版本下载jquery，请注意。

问题：我怎样才能映射到jquery我的构建？

索引.html：

webpack 配置（在本地运行良好）

注意：构建后，如果我在服务器中运行它，我会收到错误：

我的服务器尝试jquery从外部源下载。

我正在尝试配置 Webpack 外部，以便我的一些部门不会最终出现在我的 UMD 应用程序的捆绑包中。我已经阅读了有关外部 CDN https://webpack.js.org/configuration/externals/的文档，但是我的印象是，当输出中的库目标为“UMD”时，该选项不起作用：

这是我期望它的工作方式：

但是每当我配置这个时，我都会遇到构建错误：

只是为了提供更多背景信息：我正在与许多不同供应商合作的网站上工作，我和我的团队已经构建了在该网站上运行的多个应用程序。我们一直在开发的那些应用程序使用一些常见的库，例如 lodash/jquery/moment/...，有时这些库的版本完全相同，所以我想使用 CDN，而不是在这些单独的应用程序中捆绑相同的代码。这将允许最终用户只加载一次库。

到目前为止，我们已经在使用 requirejs，其中一些配置可以让我们实现这一点。例如，这个 lodash 需要配置：

我可以很容易地在 webpack 中使用 lodash 作为外部：

而且效果很好......但是我的目标是在库版本方面真正灵活，这就是为什么我试图将 CDN 直接添加到 webpack 外部配置中。

提前感谢您的帮助:-)

webpack 版本 4.42.0