Closed emiola closed 5 years ago
Hi @emiola, can you provide your rollup configuration and a sample of your code?
Sure,
I used the sveltejs/template
and just added rollup-plugin-postcss
to the standard rollup configuration, to import directly the css file.
App.svelte
:
<script>
import ProgressBar from "@okrad/svelte-progressbar";
import "@okrad/svelte-progressbar/dist/svelte-progressbar.css";
const pb = new ProgressBar({
target: document.getElementById("demo"),
props: {
series: 20
}
});
</script>
<div id="demo"></div>
rollup.config.js
:
import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
const production = !process.env.ROLLUP_WATCH
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css')
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve({
browser: true,
dedupe: importee =>
importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
// to import css files
postcss({
plugins: []
})
],
watch: {
clearScreen: false
}
}
Ok, I cleaned up the code and followed the suggested format for components from https://github.com/sveltejs/component-template. I even updated the readme to better explain how to use the progress bar in a svelte app.
I published the latest version on npm, please update your code.
Awesome. Thank you so much!
Importing with npm in a svelte project using rollup, as soon as I invoke the constructor, I get:
Uncaught TypeError: ProgressBar is not a constructor
Any suggestions? Thanks.