parcel-plugin-svelte icon indicating copy to clipboard operation
parcel-plugin-svelte copied to clipboard

changes required to use

Open mvolkmann opened this issue 5 years ago • 13 comments

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",

mvolkmann avatar Jan 13 '20 14:01 mvolkmann

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)

DeMoorJasper avatar Jan 13 '20 16:01 DeMoorJasper

Here is what I had to do to get this to work with a basic Svelte app:

  1. npm install parcel-bundler
  2. npm install parcel-plugin-svelte
  3. Change the "start" npm script in package.json to "start": "parcel public/index.html --no-cache"
  4. npm run build
  5. npm start

Do these steps seem correct? Is it necessary to run "npm run build" again after every code change?

mvolkmann avatar Jan 13 '20 16:01 mvolkmann

@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 :)

DeMoorJasper avatar Jan 13 '20 19:01 DeMoorJasper

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.

mvolkmann avatar Jan 13 '20 19:01 mvolkmann

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

DeMoorJasper avatar Jan 13 '20 19:01 DeMoorJasper

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 avatar Jan 13 '20 19:01 mvolkmann

@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 ;)

DeMoorJasper avatar Jan 13 '20 19:01 DeMoorJasper

Maybe the answer is that we need a new equivalent of sveltejs/template that is specific to using Parcel.

mvolkmann avatar Jan 13 '20 19:01 mvolkmann

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 avatar Jan 13 '20 20:01 mvolkmann

@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

DeMoorJasper avatar Jan 13 '20 20:01 DeMoorJasper

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 avatar Jan 13 '20 20:01 mvolkmann

@mvolkmann yeah I totally agree, I'm happy to help implement these things once parcel 2 reaches a stable point

DeMoorJasper avatar Jan 13 '20 20:01 DeMoorJasper

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.

mvolkmann avatar Jan 13 '20 20:01 mvolkmann