Skip to content
This repository has been archived by the owner on Jan 18, 2022. It is now read-only.

How to transpile output of rollup-plugin-vue to ES5 using rollup-plugin-babel? #236

Closed
cloudever opened this issue Oct 3, 2018 · 3 comments

Comments

@cloudever
Copy link

cloudever commented Oct 3, 2018

Expected behavior

Keyword const should be transpiled to var because I've applied .browserslistrc with ie 9 for Babel 7.
It seems to be that code from vue-component-compiler is not transpiled to ES5 partially.

https://github.com/vuejs/vue-component-compiler/blob/afa1cd440123e2e0c195908c1e15935273ac64a9/src/assembler.ts#L304-L307

"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-vue": "^4.3.2",

Actual behavior

I get following code that contains const not var!

	var __vue_staticRenderFns__ = [];
	__vue_render__._withStripped = true;

	  /* style */
	  const __vue_inject_styles__ = undefined;
	  /* scoped */
	  const __vue_scope_id__ = undefined;
	  /* module identifier */
	  const __vue_module_identifier__ = undefined;
	  /* functional template */
	  const __vue_is_functional_template__ = false;
	  /* component normalizer */
	  function __vue_normalize__(
	    template, style, script$$1,
	    scope, functional, moduleIdentifier,
	    createInjector, createInjectorSSR
	  ) {
	    const component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};

Steps to reproduce the behavior

Create babel.config.js

module.exports = (api) => {
  api.cache(api.env('development'));

  const presets = [
    ['@babel/preset-env', {
      modules: false,
      useBuiltIns: false,
      forceAllTransforms: true,
    }],
  ];

  const plugins = [
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    ['@babel/plugin-transform-runtime', {
      corejs: 2,
      helpers: true,
      regenerator: false,
    }],
  ];

  return {
    presets,
    plugins,
  };
};

Apply plugins

export default () => [
  vue({
    compileTemplate: true,
    css: false,
  }),
  babel({
    exclude: [/\/core-js\//],
    runtimeHelpers: true,
  }),
  css(),
  replace({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
  resolve(),
  commonjs(),
].filter(Boolean);

And .browserslistrc

> 1%
last 2 versions
ie 9
@ChristianMurphy
Copy link

One possible work around is switching form Babel to Bublé.
No plugins or staging/draft spec features, but it handles the ES2015+ transpilation to ES5 well enough.

@ghettovoice
Copy link

There is related issue rollup/rollup-plugin-babel#260

@znck
Copy link
Member

znck commented Oct 28, 2018

See rollup/rollup-plugin-babel#260 (comment)

We have to add .vue extension to babel handled files.

@znck znck changed the title Generated code is not transpiled by rollup-plugin-babel to ES5 How to transpile output of rollup-plugin-vue to ES5 using rollup-plugin-babel? Oct 28, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants