Question

我是Webpacker和Rails的新手。我最近转向使用Webpacker来捆绑React组件。由于部分应用程序仍使用资产管道，因此某些依赖项仍存储在vendor/assets/javascript中，并可作为全局变量访问。 Webpack包将这些依赖项声明为外部，并且在为应用程序提供服务时，一切都运行良好，因为Rails提供依赖项，然后由bundle拾取。现在我想开始使用像jsdom这样的东西测试捆绑包。我正在使用与开发中相同配置的mocha-webpack。

在这种情况下如何加载外部依赖项？如果我理解正确，捆绑包构建正常，但是当测试运行时，不会加载依赖项。

Answer 1

考虑使用另一个 webpack.config.js 仅用于测试构建，例如创建一个不使用外部的 webpack.config.test.js ，但将所有供应商文件捆绑为npm依赖项。

Answer 2

我在 test 模式下使用了 webpack 的 resolve.alias 功能，在 development/production 模式下使用了 externals 功能。

基本上，让您的 webpack.config.js 检查 process.env.NODE_ENV 并根据模式返回不同的设置。

const path = require('path');

const isTest = process.env.NODE_ENV === 'test';

let resolve;
let externals = { jquery: 'jquery ' };
if (isTest) {
    externals = {};

    resolve = {
        alias: {
            // you may have to fiddle around with this path, from the point of view of where jquery is imported
            jquery: './tests/helpers/fakeJQuery.js',
        }
    };
}

module.exports = {
    // ...
    resolve,
    externals,
    // ...
};

这里有一个 vue.js 的例子： https://stackoverflow.com/a/68569055/289203

如何测试具有外部依赖性的Webpack包？

2 个答案: