parcel-plugin-svelte
parcel-plugin-svelte copied to clipboard
changes required to use
This is a question.
What changes do we need to make in the package.json npm scripts of our Svelte projects in order to use this? Presumably these need to change:
"build": "rollup -c",
"dev": "rollup -c -w",
You could have a look at the example: https://github.com/DeMoorJasper/parcel-plugin-svelte/blob/master/packages/svelte-3-example/package.json
You basically need to install the plugin using yarn add parcel-plugin-svelte -D
(or npm) and than just run parcel like you normally would: https://parceljs.org/getting_started.html (and than it should automatically detect the plugin and run all files with extension .svelte through this plugin)
Here is what I had to do to get this to work with a basic Svelte app:
- npm install parcel-bundler
- npm install parcel-plugin-svelte
- Change the "start" npm script in package.json to "start": "parcel public/index.html --no-cache"
- npm run build
- npm start
Do these steps seem correct? Is it necessary to run "npm run build" again after every code change?
@mvolkmann I don't see any reason to run npm run build
so you can probably leave that out.
Thanks for the detailed steps I'll probably create a more elaborate getting started guide in the readme after this :)
If I don't run npm run build
and only run npm start
I get this:
ENOENT: no such file or directory, open '/{project-directory}/public/build/bundle.css'
npm run build
creates that file.
Ow than your build command probably creates some css, what is the script specified in build?
Also I updated the Readme a bit more hopefully it helps https://github.com/DeMoorJasper/parcel-plugin-svelte#getting-started
I started with an app created by npx degit sveltejs/template
, so the "build" npm script is
"build": "rollup -c",
The file public/index.html
includes this line:
<link rel='stylesheet' href='/build/bundle.css'>
Is there a Parcel way to create build/bundle.css
?
@mvolkmann if that's the css bundled from the svelte you can just remove that line and it should work fine. Parcel automatically injects that nto html ;)
Maybe the answer is that we need a new equivalent of sveltejs/template that is specific to using Parcel.
The more I think about this, I'm convinced that we really need a way to create a new app that uses Parcel by running npx degit some-repo/some-template app-name
like we have for using Rollup or Webpack. That would put Parcel on even ground with those so it's no harder to use.
@mvolkmann the goal of parcel is kind of that tools like that are no longer necessary but it would definitely be cool to have it support parcel
Yeah, I'm just thinking that if there's a single command to spin up a Svelte app using Rollup or Webpack (using "npx degit") but not for Parcel, it might hurt adoption of using Parcel with Svelte. You've documented the steps well on your site, but it currently requires more work than the Rollup/Webpack approaches. I'm referring to needing to manually create the initial versions of the index.html, main.js, and App.svelte files.
On Mon, Jan 13, 2020 at 2:10 PM Jasper De Moor [email protected] wrote:
@mvolkmann https://github.com/mvolkmann the goal of parcel is kind of that tools like that are no longer necessary but it would definitely be cool to have it support parcel
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DeMoorJasper/parcel-plugin-svelte/issues/103?email_source=notifications&email_token=AAATLUDSAXOEPGUXLAVXOWTQ5TDFBA5CNFSM4KGDFYBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEI2DT6Y#issuecomment-573848059, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATLUB5KB7YAGSN3DGOG7LQ5TDFBANCNFSM4KGDFYBA .
-- R. Mark Volkmann Object Computing, Inc.
@mvolkmann yeah I totally agree, I'm happy to help implement these things once parcel 2 reaches a stable point
Sounds good! I'd be happy to help also. Let me know later if you want me to pitch in. You can close this issue now if you'd like ... or keep it open as a reminder.