對遺留代碼同時使用 Imports-Loader 和 Exports-Loader

Question

我有 2 個遺留的 JS 文件，我不想更改它們。 出於這個原因，我想使用exports-loader 和imports-loader

文件 B-legacy 需要來自文件 A-legacy 的全局變量 GLOB

我的 webpack.config.js 結果

rules: [
        { test: /\.ts$/, use: 'ts-loader' },     // Typescript file loader;              
        {
            test: path.resolve(__dirname, '../Scripts/legacy/A-legacy'),        
            use: 'exports-loader?GLOB'
        },
        {
            test: path.resolve(__dirname, '../Scripts/legacy/B-legacy'),
            use: 'imports-loader?GLOB'
        } 
    ],

據我了解，這應該有效。 我正在導出 A-legacy 中的 GLOB var 並希望將其導入到 B-legacy。

但是構建它會出現以下錯誤：

未找到 ./Scripts/legacy/B-legacy.js 模塊中的錯誤：錯誤：無法解析“C:\\anypath\\Scripts\\legacy”@ ./Scripts/legacy/A-legacy.js 中的“GLOB” :11-26

我已經嘗試在exports-loader 規則中添加enforce: "pre"。 但這不會改變任何事情

Answer 1

盡管我使用的是內聯導入，但我的設置中有完全相同的錯誤。 我解決這個問題的方法是刪除B-legacy文件的imports-loader 。

示例設置是我收到Module not found錯誤：

import formValidation from 'exports-loader?FormValidation!./src/form-validation';
import script from '!!imports-loader?$=jquery,FormValidation!./src/script';

固定設置：

import formValidation from 'exports-loader?FormValidation!./src/form-validation';
import script from '!!imports-loader?$=jquery!./src/script'; // removed FormValidation

在此之上，我不得不暴露FormValidation所以還是在瀏覽器中，並利用現有imports-loader來定義this為window ：

import formValidation from 'expose-loader?FormValidation!imports-loader?this=>window!exports-loader?FormValidation!./src/form-validation';

請注意，加載程序的順序很重要。