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 文件和 src 映射（tmp 目录）的文件夹。但是将它们连接到一个文件中会完全弄乱源映射。

想法？另外，我可以以某种方式跳过临时文件的制作并将结果通过管道传输到 concat 中吗？

4

1 回答 1

16

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

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

这里的script.js.map文件是concattask生成的source map文件的名字。作为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

于 2015-09-17T11:46:37.717 回答