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的工作原理。例如，假设我想将这些文件捆绑到一个仍然从外部假设jquery和jquery-ui的AMD样式库文件中：

// 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']
}

它工作得非常好。

使用webpack处理具有外部依赖性的AMD库

1 个答案: