关于webpack 2：同时使用Imports-Loader和Exports-Loader获取旧代码


Using Imports-Loader and Exports-Loader at same time for legacy code

我有2个旧的JS文件，我不想更改。因此，我想使用exports-loader和imports-loader

文件B-旧版需要文件A-旧版中的全局var GLOB

我的webpack.config.js结果为

1
2
3
4
5
6
7
8
9
10
11
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。

但是构建它会出现以下错误：

ERROR in ./Scripts/legacy/B-legacy.js
Module not found: Error: Can't resolve 'GLOB' in 'C:\\anypath\\Scripts\\legacy'
@ ./Scripts/legacy/A-legacy.js 2:11-26

我已经尝试在出口装载程序规则中添加强制：" pre"。但这没有任何改变

尽管我使用的是内联导入，但是在安装过程中发生了完全相同的错误。我解决问题的方法是删除B-legacy文件的imports-loader。

示例设置是我遇到了Module not found错误：

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

固定设置：

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

最重要的是，我必须公开FormValidation，因此它仍可在浏览器中使用，并使用imports-loader将this定义为window：

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

请注意，装载机的顺序很重要。