同时使用 Imports-Loader 和 Exports-Loader 处理遗留代码答案

【问题标题】：Using Imports-Loader and Exports-Loader at same time for legacy code同时使用 Imports-Loader 和 Exports-Loader 处理遗留代码
【发布时间】：2017-09-12 14:40:54
【问题描述】：

我有 2 个旧 JS 文件，我不想更改它们。出于这个原因，我想使用exports-loader和imports-loader

文件 B-legacy 需要来自 File 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”中的“GLOB” @ ./Scripts/legacy/A-legacy.js 2:11-26

我已经尝试将 enforce: "pre" 添加到 exports-loader 规则。但这并没有改变什么

【问题讨论】：

标签： webpack-2 imports-loader exports-loader

【解决方案1】：

我的设置中出现了完全相同的错误，尽管我使用的是内联导入。我解决问题的方法是删除 imports-loader 的 B-legacy 文件。

示例设置是我收到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';

请注意，加载程序的顺序很重要。

【讨论】：