使用Babel.js将ES2015转换为ES5时,模板文字标记功能出现问题

Tho*_*erg 6 javascript babel ecmascript-6 gulp babeljs

我正在使用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
        }));
});
Run Code Online (Sandbox Code Playgroud)

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.`;
};
Run Code Online (Sandbox Code Playgroud)

我的JavaScript使用模块设计模式,因此范围不会成为问题.虽然示例代码位于模块中,但已转换的标记对象仍然放在全局范围内.以下是已转换的标记对象的外观:

第一个文件

var _templateObject = _taggedTemplateLiteral(["My name is ","and I am the best."])
Run Code Online (Sandbox Code Playgroud)

第二档

var _templateObject = _taggedTemplateLiteral(["I love ","and ice cream."])
Run Code Online (Sandbox Code Playgroud)

由于变量放在全局范围内,因此第一个变量将被第二个变量替换.

有没有办法确定这些模板对象的范围?任何帮助深表感谢.

在我的模块外部创建的实际模板对象的图像

第二个模块

谢谢!