javascript - 使用 webpack 处理具有外部依赖项的 AMD 库

Question

我有一个以 AMD 风格编写的库，可以与 RequireJS 一起使用。 jquery 和 jquery-ui 假定由库的用户提供。说它看起来像这样:

// main-lib.js
define(['jquery', './aux-lib.js'], function ($) { ..(1).. });

// aux-lib.js
define(['jquery', 'jquery-ui'], function ($) { ..(2).. });

我正在尝试弄清楚 webpack 是如何工作的。例如，假设我想将这些文件捆绑到一个 AMD 样式库文件中，该文件仍然采用外部的 jquery 和 jquery-ui:

// out.js
define(['jquery', 'jquery-ui'], function ($) { ..(1)..(2).. } );

这是如何实现的？

当我使用 main-lib.js 作为 entry 点运行 webpack 时，它会提示找不到 jquery 并且jquery-ui。如果我使用 resolve.alias 配置正确的路径，它会将 jquery 和 jquery-ui 捆绑到 out.js ，这不是我想要的。我尝试使用 output.externals 但没有成功。

Answer 1

这对我来说是一个非常简单、愚蠢的错误。相关字段不是output.externals，而只是externals。请参阅here 。引入的另外两个相关字段位于 output 内部，但 externals 不在内部。

PS:externals 也可以是数组。这是我当前的配置:

{
    entry: './main-lib.js',
    output: {
        path: './',
        filename: 'out.js',
        libraryTarget: 'amd'
    },
    externals: ['jquery', 'jquery-ui']
}

它运行得很好。