我正在使用Gulp和Babel将ES2015代码转换为ES5。我们使用模板文字和标记函数来删除任何前导空格。
在进行转换时,模板文字将被添加到具有相同变量名称的全局范围。这导致JavaScript模板在某些视图中被覆盖。
Gulp任务
// Transpile ES2015 JS to ES5 JS
gulp.task('babel', function () {
return gulp.src('precompiled/Views/**/*.js') // Gets all files ending with .js in precompiled/Views and children dirs
.pipe(babel({
presets: ['es2015']
}))
.pipe(header('/* THIS IS A GENERATED FILE. MAKE CHANGES TO THE SOURCE FILE. CHANGES HERE ARE OVERWRITTEN. */\n\n'))
.pipe(gulp.dest('./Views')) // Outputs it in the Views folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
});
示例
const singleLineString = function (strings) {
const values = Array.prototype.slice.call(arguments, 1);
// Interweave the strings with the
// substitution vars first.
let output = "";
for (var i = 0; i < values.length; i++) {
output += strings[i] + values[i];
}
output += strings[values.length];
// Split on newlines.
const lines = output.split(/(?:\r\n|\n|\r)/);
// Rip out the leading whitespace.
return lines.map(function (line) {
return line.replace(/^\s+/gm, '');
}).join(' ').trim();
};
const firstFilesJSFunction = (name) => {
return singleLineString `My name is ${name} and I am the best.`;
};
const secondJSFilesFunction = (candy) => {
return singleLineString `I love ${candy} and ice cream.`;
};
我的JavaScript使用模块设计模式,因此范围不会成为问题。虽然示例代码位于模块中,但已转换的标记对象仍然放在全局范围内。以下是已转换的标记对象的外观:
第一个文件
var _templateObject = _taggedTemplateLiteral(["My name is ","and I am the best."])
第二档
var _templateObject = _taggedTemplateLiteral(["I love ","and ice cream."])
由于变量放在全局范围内,第一个变量将被第二个变量替换。
有没有办法确定这些模板对象的范围?任何帮助深表感谢。
谢谢!