Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/378.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Grunt babel多个文件并保留源映射_Javascript_Gruntjs_Grunt Contrib Concat_Grunt Babel - Fatal编程技术网

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

Javascript Grunt babel多个文件并保留源映射,javascript,gruntjs,grunt-contrib-concat,grunt-babel,Javascript,Gruntjs,Grunt Contrib Concat,Grunt Babel,我正在尝试使用grunt和babel传输文件夹中的所有js6文件,最终得到一个连接的单个文件(js5),其中包含一个到原始es6文件的工作源映射。但是,sourcemapping不起作用。My babel,concat设置如下: "babel": { options: { sourceMap : true }, dist: { files:[ {

我正在尝试使用grunt和babel传输文件夹中的所有js6文件,最终得到一个连接的单个文件(js5),其中包含一个到原始es6文件的工作源映射。但是,sourcemapping不起作用。My 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
task创建的单个文件运行
babel
task

options: {
                sourceMap: true,
                inputSourceMap: grunt.file.readJSON('script.js.map')
            },
这里的
script.js.map
文件是由
concat
任务生成的源映射文件的名称。由于
inputSourceMap
选项不包含源映射对象,因此我们使用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'
        }
    }

项目示例:

您可以先运行concat任务,然后在单个文件上运行带有源映射选项的babel任务true@PrayagVerma因为我可以调试es6代码,所以这确实让它变得更好。不是从原始文件,而是更好。babel似乎有一个inputSourceMap选项,但让它工作对我来说并不简单。@PrayagVerma这很好,但当babel遇到错误时,它不会显示它的原始源位置,而是在连接的文件中。有人知道如何解决这个问题吗?这很有效,谢谢。为了让它在VisualStudio任务运行程序中工作,我必须做的是更改:inputSourceMap:function(){if(grunt.file.exists('../concatated-es6.js.map')){return grunt.file.readJSON('concatated-es6.js.map')}return return()否则任务列表将崩溃。这主要起作用,但Grunt文件在生成源映射之前一直尝试读取源映射。为了解决这个问题,我注册了一个在concat和babel之间运行的自定义任务,该任务将
inputSourceMap
选项添加到babel配置中。使我的Gruntfile.js看起来像这样:根据,解析源映射json是不需要的。只要
inputSourceMap
是真实的,Babel将始终解析concat输出中的源映射注释。更糟糕的是,如果它找到一个源映射注释,它将忽略任何值,这里总是这样。因此,这可能不会达到您预期的效果。最终,这是问题的真正解决方案。许多其他grunt插件都有一个选项
sourceMapIn
,您可以将路径传递到该选项,但该插件需要一个没有更好指定的“源映射对象”。就是这样。对我来说,这会导致内存不足错误,因为我的sourcemap很大。节点选项--最大旧空间大小=10000。