如何将外部链接从webpack传递到开玩笑？

Question

我有这个webpack配置作为我的grunt构建过程的一部分:

module.exports = {
options: {
    output: {
        path: path.resolve('../ui/static/js'),
        filename: '[name].js',
        chunkFilename: '[id].[name].js',
        libraryTarget: 'amd',
        library: '[name]'
    },

    externals: [
        'jquery',
        'lodash',
        'backbone',
        'backbone.layoutmanager',
        'moment',
        'spin',
        'lib/select2.min',
        'dispatcher'
    ],
    resolve: {
        root: path.resolve('../ui'),
        alias: {
            'jst': 'static/jst'
        }
    }

我们现在正在做出反应,我需要在我的测试文件中导入一些文件,其中包含这些依赖项,但是jest无法找到它们:

Cannot find module 'lib/select2.min' from 'helpers.js'
Cannot find module 'jst/templates_jst' from 'base-view.js

解决此问题的正确方法是什么？

Answer 1

这是今天使用webpack@4.11.1和进行操作的方法jest@23.1.0。假设这是您的外部 webpack 配置：

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
  },
}

您需要映射每个外部库，以便在您的笑话配置中正确解析，如下所示：

moduleNameMapper: {
  "^./react": path.resolve(__dirname, 'node_modules/react'),
}

在调试问题时，请务必检查构建的组件文件的样子。您需要确保看到类似以下内容：

!function(e,t){if("object"==typeof exports&&"object"==typeof module)
module.exports=t(require("react"));
else if("function"==typeof define&&define.amd)define(["react"],t);
else{var n="object"==typeof exports?t(require("react")):t(e.React);

react对于 commonjs 和 amd 以及React浏览器来说，重要的一点是。