0

我有一个使用 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以实现我的目标？

4

1 回答 1

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;
};
于 2017-11-20T16:48:25.980 回答