What's the best way to include both source and distribution files in an npm package?

Other Questions NPM
1

I’m trying to create an npm package that includes both my source code and the built distribution files. Right now my project has a src folder with the original JavaScript files and a dist folder that’s generated during the build process. The dist folder isn’t in my GitHub repo.

When I run npm publish from my repo, only the src folder gets published. How can I make sure that when someone runs npm install, they get both the src and dist folders?

Here’s what my package.json looks like:

{
  "name": "code-bundler",
  "version": "1.0.0",
  "main": "dist/main.js",
  "scripts": {
    "test": "jest",
    "build": "webpack",
    "prepublish": "npm run build"
  },
  "dependencies": {},
  "devDependencies": {}
}

Any tips on how to include both source and distribution files when publishing my package would be super helpful!

2

hey tom, try adding a ‘files’ field in ur package.json like: ‘files’: [‘src’,‘dist’]. also, check that ur .gitignore isnt blocking dist. if it is, add a .npmignore so npm gets it. thx!

3

I’ve faced this exact issue before, and here’s what worked for me:

First, make sure your dist folder is included in your npm package by adding a files field to your package.json:

"files": ["dist", "src"]

This explicitly tells npm which files to include when publishing.

Next, I’d recommend adding a .npmignore file to your project root. This works like .gitignore but for npm. You can use it to exclude files you don’t want in your package, while still including dist.

Lastly, double-check your prepublish script. Sometimes it can cause issues if it’s not set up correctly. I usually use prepare instead:

"scripts": {
  "prepare": "npm run build"
}

This ensures your dist folder is always up-to-date when publishing.

Hope this helps! Let me know if you run into any other issues.

4

From my experience, the key to including both source and distribution files in an npm package lies in properly configuring your package.json file. Ensure your ‘main’ field points to the entry point in your dist folder. Then, add a ‘files’ array specifying both ‘src’ and ‘dist’ directories for inclusion.

Additionally, I’ve found it beneficial to use the ‘prepare’ script instead of ‘prepublish’. This script runs both on npm install and before npm publish, ensuring your dist folder is always built and up-to-date.

Lastly, don’t forget to gitignore your dist folder but not npmignore it. This way, it’s excluded from your repo but included in your package. These steps should solve your publishing issues and provide users with both source and distribution files.