Rollup-plugin-vue: How to transpile output of rollup-plugin-vue to ES5 using rollup-plugin-babel?

Created on 3 Oct 2018  路  3Comments  路  Source: vuejs/rollup-plugin-vue

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
Question question

Most helpful comment

All 3 comments

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.

See https://github.com/rollup/rollup-plugin-babel/issues/260#issuecomment-429085745

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Tidyzq picture Tidyzq  路  7Comments

Zekfad picture Zekfad  路  6Comments

hosein2398 picture hosein2398  路  5Comments

lancetharper picture lancetharper  路  5Comments

spentacular picture spentacular  路  6Comments