繁体   English   中英

Grunt babel多个文件并保留源映射

[英]Grunt babel multiple files and preserve source mapping

我正在尝试使用grunt和babel来转换文件夹中的所有js6文件,最后得到一个连接的单个文件(js5),其中包含原始es6文件的工作源映射。 但是,源映射不起作用。 我的babel,concat设置如下:

 "babel": {
        options: {
            sourceMap : true
        },
        dist: {
            files:[
                {
                    expand: true,
                    cwd: 'wwwroot/js/src',
                    src: ['*.js'],
                    dest: 'tmp/js'
                }]
        }
    },

    concat: {
        options: {
            sourceMap: true
        },
        js: {
            src: [
              'tmp/js/*.js',
            ],
            dest: 'wwwroot/js/app.js'
        }
    }

Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"

我最终得到了一个包含大量js文件和src映射(tmp目录)的文件夹。 但是将它们合并到一个文件中会完全混淆源映射。

想法? 此外,我可以以某种方式跳过临时文件的制作和排序只是将结果输入concat?

颠倒任务的顺序将使这更容易。首先在JS文件上运行concat任务。 之后使用以下选项在concat任务创建的单个文件上运行babel任务

options: {
                sourceMap: true,
                inputSourceMap: grunt.file.readJSON('script.js.map')
            },

这里script.js.map文件是由concat任务生成的源映射文件的名称。 由于inputSourceMap选项除了源映射对象之外,我们使用grunt.file API的readJSON方法传递它

完整的Grunt文件配置为:

concat: {
        options: {
            sourceMap: true
        },
        js: {
            src: ['Modules/**/js/*.js'],
            dest: 'script.js'
        }
    },
    babel: {
        dist: {
            options: {
                sourceMap: true,
                inputSourceMap: grunt.file.readJSON('script.js.map')
            },
            src: [
                'script.js',
            ],
            dest: 'app.js'
        }
    }

示例项目: https//github.com/pra85/Grunt-Concat-Babel-Example

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM