TypeScript + Babel + Jest 不使用 moduleNameMapper 來減少文件

Question

我將我的笑話配置設置為 map any.less 和.css 導入到identity-obj-proxy模塊，基本上在現有的每個文檔引用/教程中都有規定。

module.exports = {
  // ...
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

但是，我發現當a.less文件包含一些無效css的forms（例如單行注釋，調用mixins等）時，導入的object是空的。 這使我發現映射甚至沒有被觸發，並且一些其他機制（我還沒有弄清楚，因為我沒有設置這個項目）一直在從樣式表生成 class 名稱，而不是簡單地使用代理。

import styles from './my-style-sheet.less'; // styles = {}
import * as styles from './my-style-sheet.less'); // styles = { default: {} }
import styles from './not-a-real-file.less'); // styles = {}
const styles = require('./my-style-sheet.less'); // styles = {}

對我來說真正奇怪的是，當我在調試並評估表達式require('./my-style-sheet.less')時，它確實導入了代理模塊。 事實上，我可以要求任何以.less結尾的東西，它會導入代理，不管文件是否存在——這是我所期望的。

moduleNameMapper中的其他模式正常工作，例如一些路徑別名。

module.exports = {
  // ...
  moduleNameMapper: {
    '^common': '<rootDir>/src/components/common',
  },
};

我不知道發生了什么，也不知道如何調試它。

Answer 1

事實證明這是我們的babel.config.js的問題。 我們正在添加babel-plugin-css-modules-transform插件，它顯然取代了moduleNameMapper條目。