Search code examples
javascriptbundling-and-minificationrollupjs

How to use rollup to bundle the vuejs library with my code

I am trying to do a simple thing - I want to bundle my Javascript code (that uses vuejs) with the vue library from node_modules (so that the browser only loads one js file)

The files are below, my question is - why does the bundled js file not work while the same code works with cdn based script src links? Am I missing something in rollup?

Here is what the body section of my html looks like

  <body>
    <div id="app">
      <!-- VUE WILL BE INJECTED HERE -->
      {{ message }}
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script type="text/javascript" src="bundle.js"></script>
  </body>

and here is my main.js file (from which bundle.js is created by rollup)

import Vue from 'vue';
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueREX!',
  },
});

and here is my rollup.config.js

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [commonjs({ include: ['./main.js', './node_modules/*.*'] }),
            resolve(),],
};

Thank you for your help

Solution

  • I solved it, but I find am not sure if this is the best way

    Here is what my rollup.config.js looks like now - 

    import alias from 'rollup-plugin-alias';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [commonjs(),
            replace({'process.env.NODE_ENV': JSON.stringify('development')}),
            alias({resolve: ['.js'], vue: __dirname + '/node_modules/vue/dist/vue'})
          ]
}

    The main.js file remains as is.

    Essentially, I am relying on rollup-plugin-alias instead of rollup-plugin-node-resolve

    rollup-plugin-node-resolve works well for libraries that do not have multiple versions in the node_modules/<lib>/dist/ directory