I've been facing an issue while trying to bundle a vuejs single file component using rollup. The error message that keeps popping up is
Module not found: Error: Can't resolve 'jquery'rollup.config.js
import babel from 'rollup-plugin-babel';
import minimist from 'minimist';
import uglify from 'rollup-plugin-uglify-es';
import vue from 'rollup-plugin-vue';
const argv = minimist(process.argv.slice(2));
const config = {
input: 'src/index.js',
output: {
name: 'ExampleComponent',
exports: 'named',
globals: {
jquery: 'jQuery',
},
},
plugins: [
vue({
css: true,
compileTemplate: true,
}),
babel({
exclude: 'node_modules/**',
externalHelpersWhitelist: [
'defineProperties',
'createClass',
'inheritsLoose',
'defineProperty',
'objectSpread',
],
}),
],
external: ['jquery'],
};
// Only minify browser (iife) version
if (argv.format === 'iife') {
config.plugins.push(uglify());
}
export default config;
index.js
// Import vue component
import component from '../src/main.vue';
// install function executed by Vue.use()
export function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('ExampleComponent', component);
}
// Create module definition for Vue.use()
const plugin = {
install,
};
// To auto-install when vue is found
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
// To allow use as module (npm/webpack/etc.) export component
export default component;
package.json
{
"main": "dist/example-component.umd.js",
"module": "dist/example-component.esm.js",
"unpkg": "dist/example-component.min.js",
"scripts": {
"build": "npm run build:unpkg & npm run build:es & npm run build:umd",
"build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-selectize.umd.js",
"build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-selectize.esm.js",
"build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-selectize.min.js"
},
"dependencies": {
"tablesorter": "^2.31.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"rollup": "^0.65.2",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^4.3.2",
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.17"
}
}
main.vue
<template>
<select>
<slot></slot>
</select>
</template>
<script>
import $ from 'jquery'
if (!$().tablesorter) {
require('tablesorter')
}
export default {
// more code here...
}
</script>