Use closure compiler with compiled vue.js templates

Question

Is it possible to use google closure compiler with a compiled Vue.js template?

The culprit is that a compiled vue template uses "with", as in:

with(this){/** render function here **/}

... and closure compiler does not like that and thus complains with:

The with statement cannot be used in strict mode.

However, I am not sure if this is really due to strict mode, because in the sourcecode (packed with webpack) there is no "use strict"; in the offending function:

/***/ "./my/compiled/vue/template":
/***/ (function(module, exports) {
    module.exports = {
      render: function(){with(this){ /** render function here **/ }},
      staticRenderFns: []
    };
/***/ })

Now, the question is if there is a way to make this compile in closure compiler? Think the most easiest way would be to tell the compiler to pass through that code without doing anything to it (unminimized code runs just fine, so it seems to be valid), but it seems there is no such option.

Any other ideas?

Answer 1

OK, I think I know now how to solve this. Turns out that indeed, with compiled .vue templates there seem to be different outputs depending on how you build it. Since I just had to compile templates - but no full scale single file components - I used the simpler vue-template-compiler-loader which uses the official compiler and produces the problematic output I described. Now, I tried to build with the more complex vue-loader (which is more tailored to single file components) and it seems it also works with files that are "template only". And it seems like the output of that loader is different, as the render functions produced contain no with(this)!

This code now compiled without a problem in closure compiler, and first test runs in IE10 (my "lowest target") indicate that the build is just fine now!

Kudos to @tony19 for pointing me in the right direction!