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

时间:2016-06-16 12:05:36

标签: javascript gulp ecmascript-6 babeljs babel

我正在使用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."])

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

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

Image of the actual template objects created outside my module

Second module

谢谢!

0 个答案:

没有答案