用于 SystemJS 样式导入的自定义 Webpack 解析器！带装载机

Question

>我有一个使用 SystemJS 的项目 - 这无法更改。我们也在使用StoryBooks，它使用WebPack - 这也不能改变。到目前为止，两人玩得非常好。但是，我有一个模块，它将文件加载为纯文本并解析它们：

import stuff from './some-module!systemjs-plugin-text';
parseStuff(stuff);

如果我的项目使用 WebPack，上面的代码将如下所示：

import stuff from 'raw-loader!./some-module';
parseStuff(stuff);

由于 SystemJS 是"主要"模块加载器，我希望所有应用程序代码都以 SystemJS 为中心。我想为 webpack 编写一个自定义解析器来获取 SystemJS 风格的导入并"翻转"它们(可以这么说(。代码如下所示：

const moduleMap = {
  'systemjs-plugin-text': 'raw-loader'
};
const formatModuleIdForWebPack (systemjsId) {
  const webpackId = systemjsId.split('!').reverse();
  webpackId[0] = moduleMap[ webpackId[0] ] || webpackId[0];
  return webpackId.join('!');
}
formatModuleIdForWebPack('./some-module!systemjs-plugin-text');
//-> 'raw-loader!./some-module'

我遵循了几个创建自定义解析器的示例(此处和此处(，但没有一个有效负载包含重建请求对象所需的所有数据。有没有办法在模块解析的早期就挂接到 WebPack 来实现我的目标？

Answer 1

我能够使用自定义加载器来实现我的目标。这并不理想，但解析逻辑相当简单，可以随着时间的推移而变得更强。使用此策略使我只能将其应用于项目文件(node_modules中未包含的任何内容(。

  {
    test: /.js$/,
    loader: path.resolve('systemjs-loader.js'),
    exclude: [
      path.resolve('node_modules')
    ],
    options: {
      loaderMap: {
        'systemjs-plugin-text': 'raw-loader'
      }
    }
  }

。和加载器代码：

const { getOptions } = require('loader-utils');
const escapeRegexp = require('escape-string-regexp');
/**
 * Replaces systemjs-style loader syntax with webpack-style:
 * 
 *   ./some-module!systemjs-plugin  ->  webpack-plugin!./some-module
 */
module.exports = function (source) {
  const options = getOptions(this);
  const map = options.loaderMap;
  if (!map) {
    throw new Error('There is no need to use the systemjs loader without providing a `loaderMap`');
  }
  Object.keys(map).forEach(loader => {
    // indexOf should be faster than regex.test
    if (source.indexOf(loader) !== -1) {
      const exp = new RegExp(`(['"])([^!]+)!${escapeRegexp(loader)}['"]`, 'g');
      source = source.replace(exp, `$1${map[loader]}!$2$1`);
    }
  });
  return source;
};