Webpack 和外部库

Posted 2023-02-24

【中文标题】Webpack 和外部库

【英文标题】：Webpack and external libraries

【发布时间】：2014-04-27 03:18:23

【问题描述】：

我正在试用 webpack (http://webpack.github.io/)，它看起来非常不错，但是我有点卡在这里。

假设我将 CDN 用于库 f.ex jQuery。然后在我的代码中，我希望 require('jquery') 自动指向全局 jquery 实例，而不是尝试从我的模块中包含它。

我尝试过使用像IgnorePlugin这样的插件：

new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))

这适用于忽略库，但当我运行 webpacker 时，它仍然说所需的模块“丢失”。

不知何故，我需要告诉 webpack jquery 应该从全局上下文中获取。似乎是一个常见的用例，所以我有点惊讶文档没有专门针对这个。

【问题讨论】：

查看此相关问题。 github.com/webpack/webpack.js.org/issues/1726

【参考方案1】：

根据Webpack documentation，你可以使用config对象上的externals属性来指定你的库的依赖，这些依赖不会被webpack解析，而是成为输出的依赖。这意味着它们是从运行时的环境 [原文如此]。”

该页面上的示例使用 jQuery 很好地说明了这一点。简而言之，您可以使用普通 CommonJS 样式的 jQuery：

var jQuery = require('jquery');

然后，在您的配置对象中，使用 externals 属性将 jQuery 模块映射到全局 jQuery 变量：

    externals: 
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    

Webpack 创建的结果模块将简单地导出现有的全局变量（为简洁起见，我在这里省略了很多内容）：

    1: function(...) 
        module.exports = jQuery;
    

我试过了，效果和描述的一样。

【讨论】：

刚刚用UMD输出试过这个，它不起作用。相反，它会输出执行 require('jQuery') 的代码，但由于模块名称是 'jquery' 而不是 'jQuery' 而失败。我不明白这个功能应该如何工作。

我遇到了同样的问题，我正在使用 ES6 模块。即使我写了import React from 'react';，外部也只是简单地配置为externals: 'react': 'react'

对于 UMD，您必须传入一个对象，该对象为每种模块类型提供不同的字符串。例如。 amd: 'jquery', global: 'jQuery', commonjs: 'jquery' 那里的确切属性可能是错误的，但应该是任何人在未来正确解决此问题的良好线索。

哇，正如@Adam A 所说，UMD 可以使用不同的名称，但正确的属性是：amd、commonjs、commonjs2 和 root！这样你就可以做到：externals: jquery: amd 'jquery', root: '$', commonjs: 'jquery', commonjs2: 'jquery'

@CalebHearon 这是很酷的语法，但我希望我能做这样的事情externals: jquery: commonjs2: 'global.jQuery'，但不幸的是这仍然会导致module.exports = require('global.jQuery');，我只是在寻找非commonjs行为module.exports = global.jQuery; 在 commonjs2 目标构建中。任何想法，我都尝试了NormalModuleReplacementPlugin，但没有成功