请问 fis3-parser-vue-component 是否支持sourceMap

[animabear]

能像vueloader + webpack支持sourceMap么？即可以在*.vue源码中进行调试。

[animabear]

使用 fis 开发时，可以不合并文件，这样只需要实现单个 vue 文件的 sourceMap。对于单个 vue 文件，script 标签中的 js 会被 babel 编译，所以我们只要能够拿到经过 babel 编译后产出的 sourceMap，并输出到产出目录，即可完成单 vue 文件的断点调试。

目前我这边修改了 fis3-parser-vue-component 和 fis-parser-babel-6.x

fis3-parser-vue-component

function generateSourceMap(file, sourceMap, content) {
    sourceMap.sourcesContent = [content];
    const mapping = fis.file.wrap(file.dirname + '/' + file.filename + file.rExt + '.map');
    mapping.setContent(JSON.stringify(sourceMap, null, 4));
    file.derived.push(mapping);
}
module.exports = function(content, file, conf) {
  // ....
  // 注册事件，接受 sourceMap
  fis.once('parser-babel:getSourceMap', function(sourceMap, subpath) {
    if (file.subpath === subpath) {
        generateSourceMap(file, sourceMap, content)
    }
  });

  // 部分内容以 js 的方式编译一次。如果要支持 cooffe 需要这么配置。
  // 只针对预编译语言
  // fis.match('*.vue:cooffe', {
  //   parser: fis.plugin('cooffe')
  // })
  scriptStr = fis.compile.partial(scriptStr, file, {
    ext: jsLang,
    isJsLike: true
  });

  // 开启 sourceMap 时，在 mya-parser-babel 中会触发 parser-babel:getSourceMap
  // 未开启 sourceMap 时，需要手动触发事件，防止 EventEmitter memory leak
  fis.emit('parser-babel:getSourceMap', {}, '');

  // ....
}

fis-parser-babel-6.x

module.exports = function(content, file, conf) {
    // 添加 useBabel 配置项，如果 useBabel 为 false 则不进行编译
    if (file.useBabel === false) {
        return content;
    }

    conf = fis.util.extend({
        presets: [
            preset2015,
            presetstage3,
            react
        ]
    }, conf);

    // 添加 jsx 的 html 语言能力处理
    if (fis.compile.partial && file.ext === '.jsx') {
        content = fis.compile.partial(content, file, {
            ext: '.html',
            isHtmlLike: true
        });
    }

    var sourceMapRelative = conf.sourceMapRelative;

    if (sourceMapRelative) {
        delete conf.sourceMapRelative;
    }

    // 出于安全考虑，不使用原始路径
    // conf.filename = file.subpath;

    var result = babel.transform(content, conf);

    // 添加resourcemap输出
    if (result.map) {
        var mapping = fis.file.wrap(file.dirname + '/' + file.filename + file.rExt + '.map');
        mapping.setContent(JSON.stringify(result.map, null, 4));
        var url = sourceMapRelative ? ('./' + file.basename + '.map').replace('jsx', 'js') :
            mapping.getUrl(fis.compile.settings.hash, fis.compile.settings.domain);
        result.code = result.code.replace(/\n?\s*\/\/#\ssourceMappingURL=.*?(?:\n|$)/g, '');
        result.code += '\n//# sourceMappingURL=' + url + '\n';
        file.derived.push(mapping);
        // 触发事件，将 sourceMap 传递给 fis3-parser-vue-component    
        fis.emit('parser-babel:getSourceMap', result.map, file.subpath);
    }

    return result.code;
};