How to Create a Package for Svelte

It’s easy — you can do it!

Agustín Encaje
Jan 18 · 5 min read
Photo by jesse ramirez on Unsplash

Introduction

The idea of this piece is to show a quick, practical and simple way to create a package that can be downloaded via npm in our project made with Svelte.

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.


1. Prerequisites

First of all, the following are required:


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.

{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

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.

The package.json will add the following field:

"devDependencies": {
"rollup": "^1.28.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^5.1.1",
"svelte": "^3.16.7"
}

4. The Package

Now we’re going to create a folder, src, in the root of the directory, and inside index.js.

We put the following code inside this file:

import Name from './Name.svelte';

export default Name;

Where Name is the name you want to give the component.

Then, we create inside the folder src we create Name.svelte where Name is the same as that in index.js.

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.


package.json

We’re going to make some changes to this file, adding the following:

"main": "dist/index.js",
"module": "dist/index.mjs",
"svelte": "src/index.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},

In main we will set the output after running the build script (there’s no need to create the /dist directory, it’s created automatically)

In 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).


rollup.config.js

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 rollup.config.js.

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:

  1. In the first two lines we exported two of the units that we installed before.
  2. Then, in the constant pkg, we bring the package.json.
  3. Then we tell him that the input he will enter is the .svelte file (again changing Name to 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 Name value to that of this component.
  4. Then we execute the two plugins.

5. Test Locally

There’s a way to test our package locally, before uploading it to npm.

  1. Create a new folder on your computer and install Svelte.
  2. From the terminal, in your package’s directory, run the command npm link
  3. 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.


Publish

  1. In the terminal, in the directory of our package, execute the command npm adduser, it will ask for the credentials of our account.
  2. 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 package.json.

"version": "1.0.0"

7. Posting on GitHub

To get the package into our GitHub repository, let’s do the following:

  1. Create a .gitignore file in the root directory of your package that includes the following:
# Directories
node_modules/
dist/

This prevents the dist folder and the node_modules folder from being published.

  1. 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.
  2. We execute the following commands in our terminal:
git init
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 .gitignore file).


Recommendations

It is quite useful, once our repository is created and our package is published, to add the following lines to our package.json file:

"repository": {
"type": "git",
"url": "https://github.com/tu-usuario/el-nombre-del-repositorio"
},
"homepage": ""
"bugs": {
"url": "https://github.com/tu-usuario/el-nombre-del-repositorio/issues"
}

This will also be added to the npm page of our package, the Homepage, and Repository fields, linking directly to our package site and the GitHub repository.


Conclusion

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.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade