问题标签 [imports-loader]

webpack 的文档列出了一个有趣的模式，用于填充设置属性的模块window，例如window.XModule = {...}.

https://webpack.github.io/docs/shimming-modules.html#the-file-sets-a-property-on-window-window-xmodule

将模式应用到 ES6，我得到了这样的结果：

我试图了解 Webpack 如何处理此语句，具体来说，该imports-loader部分扮演什么角色，imports?window=>{}. 我知道exports-loader基本上设置XMODULE为window.XModule来自依赖项。至于imports-loader，似乎它所做的只是不允许window对象被依赖项污染......但是如何？

如何与imports?window=>{}结合使用exports?window.XModule？

如果我使用imports-loaderexports=>false ，这在配置中意味着什么？它应该注入变量var exports = false，但我不知道何时以及为什么需要这个变量。

有人可以告诉我两者之间的区别吗？

我知道imports-loader 会在请求模块中插入一个require，如果符号$ 匹配，ProvidePlugin 会创建一个实例，比如Jquery。

但除此之外，还有什么使这两个彼此不同的吗？

我有一个用 coffeescript 编写的遗留应用程序，并想使用 webpack 来捆绑项目。

目标是在不影响当前代码的情况下使用 webpack。

我在文件functions.coffee中有全局函数，它在整个应用程序中都使用。现在我想编译项目而不在每个模块中使用导入。

知道如何实现这一目标吗？

我尝试使用如下导入加载器：

但是，imports-loader 似乎无法识别 Coffeescript。我收到以下错误：

这是我所拥有的：

一个.js

b.js

索引.html

我的问题是，下面的两个 webpack 配置是否达到完全相同的结果？

[1] webpack.config.js（带有导入加载器）

[2] webpack.config.js（带有ProvidePlugin）

如果它们相似但不相同，那么何时使用一个而不是另一个？

此外，在b.js,$.x等于undefined，这是否意味着$指的是不同的 jQuery 对象？如果是这样，我如何让它们引用相同的（全局）jQuery 实例？

最近，我一直在考虑将我们的构建过程Grunt从webpack-2. 我们的代码完全使用 requirejs 以 AMD 格式编写。出于演示的目的，我将发布index.js我们正在使用的文件的简约版本。

这是通过提交文件并通过 npm 加载的 jQuery-1.6.4 的链接。请暂时原谅。jQuery-1.6.4

index.js

对应require-config.js文件：

我尝试使用我们的 AMD 方法，但想使用 webpack-2 捆绑所有内容。我浏览了文档和各种博客，发现了使所有东西都像一个魅力一样工作的配置，除了旧的黄金 jQuery。

这里是webpack.config.js

生成的文件会webpack-2抛出一个未定义的错误，$.fn即它不是$一个 jQuery 函数，而是一个普通的空对象。虽然 window.$ 已定义并返回正确的 jQuery 函数，但为什么我没有得到相同的结果$。在 AMD 的情况下，我得到了正确的结果，因为$它处于闭包中并返回 1.6.4 jQuery。使用 webpack，它的行为很奇怪。

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1), __webpack_require__(13) ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, urlUtils) { ... }

我还尝试了哪些其他方法：

1. { test: /jQuery/, loader: 'expose-loader?$'
2. { test: /jQuery/, loader: 'exports-loader?jQuery=jQuery,$=jQuery,this=>window'
3. { test: /jQuery/, loader: 'exports-loader?this=>window'
4. { test: /jQuery/, loader: 'expose-loader?$=jQuery'

不能使用externals属性，因为它会污染 thw window.jQuery，并且由于该库被注入/加载到用户的网站上，这将破坏目标源上的内容。

请帮我！我现在对这个奇怪的 jQuery 事情感到沮丧。

我有 2 个旧 JS 文件，我不想更改。出于这个原因，我想使用exports-loader和imports-loader

文件 B-legacy 需要来自 File A-legacy的全局变量 GLOB

我的 webpack.config.js 结果

据我了解，这应该有效。我正在导出 A-legacy 中的 GLOB var，并希望将其导入 B-legacy。

但是构建它会出现以下错误：

./Scripts/legacy/B-legacy.js 中的错误模块未找到：错误：无法解析“C:\anypath\Scripts\legacy”中的“GLOB”@ ./Scripts/legacy/A-legacy.js 2 :11-26

我已经尝试将 enforce: "pre" 添加到 exports-loader 规则。但这并没有改变任何东西

将 React/Redux 站点部署到 Azure 应用服务时遇到问题。它构建和部署良好，但是在访问该站点时，我收到 babel-polyfill 的 JS 错误 - Uncaught TypeError: define is not a function。

我们正在使用带有一些加载器的 webpack，特别是有一个我觉得可能是问题所在 - 进口加载器。我们将它设置为use: 'imports-loader?define=>false'我相信会覆盖定义方法。我也试过这也是真的，但没有影响。我尝试define=>false完全删除，整个构建都崩溃了……请参阅此处的 webpack 配置。

非常欢迎咨询！

干杯戴夫

I got this error when I tried to add a jquery library.

ERROR:

当我使用 Jest 测试 React 组件时，使用 import-loader 的组件出现以下错误。

有谁知道如何解决这一问题？