GithubHelp home page GithubHelp logo

Comments (1)

animabear avatar animabear commented on July 20, 2024 2

使用 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;
};

from fis3-parser-vue-component.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.