How to Create a Package for Svelte
It’s easy — you can do it!
I recently finished my first package and the truth is that, although the information on the web is complete, I want to explain my process in a short and simple way. I didn’t find many articles explaining how to leave the package working for Svelte, so here’s my attempt.
2. The idea
Before you start anything, it’s good to have an idea of what you want to do, so you don’t waste time and steps doing and undoing the package. No matter how basic it is, think of something that you can use first, both to use and to practice, and that you would like to upload.
Don’t worry about whether it’s already been done or not, most things have probably already been done, just try to put your spin on it.
3. Start the Package
You can now create a folder on your PC with the name of the package (or the one you like) and open your preferred editor.
In my case I use Visual Studio Code, which has a built-in terminal. If you use a different one, open the Node console and go to the directory you just created.
Now they must run
npm init -y.
This will create a
package.json file to place information about the package, such as name, author, description, the dependencies it uses, the version etc.
"test": "echo "Error: no test specified" && exit 1"
You can fill in the fields like name, description, keywords, author, and license.
Now we can install the dependencies that will use our package. Note that this is a basic code, which means we’ll install basic dependencies.
Execute the following command in your terminal:
npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte
This will install the basic dependencies like
devDependencies (-D), so they will only be used for development.
package.json will add the following field:
4. The Package
Now we’re going to create a folder,
src, in the root of the directory, and inside
We put the following code inside this file:
import Name from './Name.svelte';
export default Name;
Name is the name you want to give the component.
Then, we create inside the folder
src we create
Name is the same as that in
Once inside the .svelte file, it’s up to you to build the component of the idea you came up with. Here it only acts as a normal .svelte page, with the style script blocks and the HTML.
You can import elements of Svelte without problems.
We’re going to make some changes to this file, adding the following:
"build": "rollup -c",
"dev": "rollup -c -w"
main we will set the output after running the build script (there’s no need to create the
/dist directory, it’s created automatically)
module we’re going to define the same thing but outputting a
.mjs, file so that Node can distinguish between modules created with CommonJS and ES6. More information on this here.
In Svelte, we will define the path of our
index.js file created earlier.
Then we’ll define the scripts (if you’re familiar with Svelte, you’ll know them).
We’re going to create another file, but this time at the root level (where the
src folder is, and the
package.json), and we’re going to call it
If you’ve used Svelte before, you already know this file.
We’re going to run this file when we run the build script and pass it some directives on what to do:
- In the first two lines we exported two of the units that we installed before.
- Then, in the constant
pkg, we bring the
- Then we tell him that the input he will enter is the
.sveltefile (again changing
Nameto the name of his file) and that the output will be the
pkg.module— that’s the module value we put before in the package.json
"module": "dist/index.mjs"and the main
"main": "dist/index.js", also changing the
Namevalue to that of this component.
- Then we execute the two plugins.
5. Test Locally
There’s a way to test our package locally, before uploading it to npm.
- Create a new folder on your computer and install Svelte.
- From the terminal, in your package’s directory, run the command
- From the newly created folder where we installed Svelte in step 1, open a new terminal located in that directory and run the command
npm link /path/of/your-package.
This will allow us to test the package locally. Also, if we make any modifications to it there’s no need to update or install — it updates itself.
6. Publish in npm
After all this, we’re ready to release the package and make it available for installation via npm.
It is recommended to create a file
README.md in the root directory with information about our package — how to install it, how to use it, configurations, etc. This is a good example for you to use.
Remember that the
README.md will be the same for npm as for the GitHub repository.
- In the terminal, in the directory of our package, execute the command
npm adduser, it will ask for the credentials of our account.
- Then run
npm publish. That's it!
IMPORTANT: Any changes we make to our package, before we can run
npm publish again, we must change the version in our
7. Posting on GitHub
To get the package into our GitHub repository, let’s do the following:
- Create a
.gitignorefile in the root directory of your package that includes the following:
This prevents the dist folder and the
node_modules folder from being published.
- In our GitHub account, we create a repository with the name of our package, and we put that DO NOT create a README.md file.
- We execute the following commands in our terminal:
git remote add origin https://github.com/tu-usuario/el-nombre-del-repositorio.git
git add .
git commit -m "First Commit"
git push -u origin master
This will upload our files to the repository (except the ones we put in the
It is quite useful, once our repository is created and our package is published, to add the following lines to our package.json file:
This will also be added to the npm page of our package, the
Repository fields, linking directly to our package site and the GitHub repository.
Is there much more that can be done before publishing the package? Yes, you can run tests, have a
LICENSE file, add prebuild and pre-publish scripts in
package.json and more.
But the idea of this piece is that at least you know how to start, then it’s up to you to add more things to the process.