Grunt babel如何对多个文件进行转换并保留源映射信息

Question

Grunt babel如何对多个文件进行转换并保留源映射信息

javascriptgruntjsgrunt-contrib-concatgrunt-babel

12

我正在尝试使用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文件和源映射（tmp目录）的文件夹。但是将它们合并成一个文件会完全搞乱源映射。

有什么好的建议吗？另外，我能否跳过制作临时文件，并将结果直接传输到concat中？

- Todilo

你可以先运行concat任务，然后在单个文件上运行babel任务，并将源映射选项设置为true。 - Prayag Verma

@PrayagVerma，这使得我能够调试ES6代码。虽然不是从原始文件中，但比之前好了一些。 - Todilo

似乎babel有一个inputSourceMap选项，但让它工作起来对我来说并不容易。 - Todilo

@PrayagVerma 这很好，但当Babel遇到错误时，它不会显示原始源位置，而是在连接的文件中。有人知道如何解决这个问题吗？ - phobos2077

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prayag Verma · Accepted Answer

将任务顺序反转将使这更容易。首先在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