我正在尝试使用 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
任务生成的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'
}
}
关于javascript - Grunt babel 多个文件并保留源映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32571058/