Webpack 和外部库

IT技术 javascript require commonjs webpack
2021-02-25 15:12:53

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

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

我试过使用这样的插件IgnorePlugin

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

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

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

1个回答

根据Webpack 文档,您可以使用externalsconfig 对象上的属性“为您的库指定依赖项,这些依赖项不会被 webpack 解析,但会成为输出的依赖项。这意味着它们是在运行时从环境中导入的 [原文如此]。 ”

该页面上的示例使用 jQuery 很好地说明了这一点。简而言之,您可以使用普通的 CommonJS 风格的 jQuery:

var jQuery = require('jquery');

然后,在您的配置对象中,使用该externals属性将 jQuery module映射到全局jQuery变量:

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

Webpack 创建的结果module将简单地导出现有的全局变量(为了简洁,我在这里省略了很多东西):

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

我试过了,它的工作原理和描述的一样。

我遇到了同样的问题,我正在使用 ES6 module。即使我写了import React from 'react';,外部也只是简单地配置为externals: { 'react': 'react' }
2021-04-17 15:12:53
哇,就像@Adam A 所说的那样,可以让 UMD 使用不同的名称,但正确的属性是:amd, commonjs, commonjs2, 和root! 这样你可以这样做:externals: {jquery: {amd 'jquery', root: '$', commonjs: 'jquery', commonjs2: 'jquery'}}
2021-04-17 15:12:53
刚刚用 UMD 输出尝试了这个,但它不起作用。相反,它输出确实需要('jQuery')的代码,因为module名称是'jquery'而不是'jQuery'而失败。我不明白这个功能应该如何工作。
2021-04-27 15:12:53
对于 UMD,您必须传入一个对象,该对象为每个module类型提供不同的字符串。例如{ amd: 'jquery', global: 'jQuery', commonjs: 'jquery' },那里的确切属性可能是错误的,但应该是任何人将来正确处理的一个很好的线索。
2021-05-03 15:12:53
@CalebHearon 这是很酷的语法,但我希望我能做这样的事情,externals: {jquery: {commonjs2: 'global.jQuery'}}但不幸的是,这仍然导致module.exports = require('global.jQuery');我只是module.exports = global.jQuery;commonjs2目标构建中寻找非常见的行为任何想法,我都NormalModuleReplacementPlugin没有运气尝试过
2021-05-11 15:12:53