Psst — looking for an app template? Go here --> sveltejs/template
- Clone it with degit:
npx degit Vehmloewff/svelte-component-template my-new-component
cd
into the folder and install thenode_modules
:
cd my-new-component
npm ci
- The
ci
command makes sure your packages match the one in thepackage-lock.json
(See here).
- Run
npm init
, to configure the project. - Replace this
README
with your own.
Your component's source code lives in src/components/[MyComponent].svelte
.
- Start Rollup:
npm run dev
-
Edit a component file in
src/components
, save it, and reload the page to see your changes. -
Make sure your component is exported in
src/components/components.module.js
. -
Make sure your component is imported and nested in
src/App.svelte
. -
Navigate to localhost:5000 to see your components live.
Your package.json has a "svelte"
field pointing to src/components/components.module.js
, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields
in your webpack config includes "svelte"
). This is recommended.
For everyone else, npm run build
will bundle your component's source code into a plain JavaScript module (index.mjs
) and a UMD script (index.js
), in the dist
folder.
This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly
hook in package.json.
Publishing to npm
- Official component-template by @Rich-Harris
- Official app-template by @Rich-Harris
- This PR by @sisou