Working on a project utilizing Vue.js and bundling with Rollup.
Shown below is the content of my rollup.config.js file
import vue from 'rollup-plugin-vue2'
import less from 'rollup-plugin-less2';
import buble from 'rollup-plugin-buble'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import uglify from 'rollup-plugin-uglify'
import livereload from 'rollup-plugin-livereload'
import serve from 'rollup-plugin-serve'
const plugins = [
vue({'css':'none'}),
less({output: "dist/build.css"}),
buble({exclude: 'node_modules/**'}),
nodeResolve({browser: true, jsnext: true}),
commonjs()
]
if (process.env.NODE_ENV === 'production') {
plugins.push(uglify())
}
if (process.env.NODE_ENV === 'development') {
plugins.push(livereload('dist'))
plugins.push(serve({
contentBase: "",
open: true
}))
}
export default {
input: 'src/main.js',
output: {
file: 'dist/build.js',
format: 'iife',
sourcemap: true,
//external: ["vue","vue-router"],
},
//external: ["vue","vue-router"],
plugins
}
My main.js file looks like this.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
];
const router = new VueRouter({
routes
});
var app = new Vue({
router: router,
el: '#app',
render: h => h(App)
});
Encountering an error after running the project:
Uncaught ReferenceError: process is not defined
By using Vue as an external library and uncommenting the line
["vue","vue-router"], external: ["vue","vue-router"]How can I resolve the compilation and functionality issues with rollup?