Setup rollup.js for a basic build

Hey this is a quick article starter showing what you will need to do if you want to get a really easy JavaScript project installed and running on your local dev PC or cloud dev environment.

The goals of this project are the following:

1. Use a modern packager (in this case rollup)
2. Build on GitHub using GitHub actions
3. Support hosting on static sites or CDN's
4. Organise code in a sensible fashion so that it is fun to develop and maintain in the future
5. Testable code

I am not going to cover all five in this article instead I am focusing on task one:

1. Use a modern packager (in this case rollup)

So I have never used rollup before so I am looking forward to it and after reading the startup guide at https://rollupjs.org/ I think I am ready to begin.

I create the following folder structure and then run

npm init

into the Project1 folder using terminal.

D: - Development
+- javascript
+- Project1
+- src

Next I modify the package.json file as follows:

"scripts": {
    "build": "rollup --config"
  },

And add a rollup.config.dev.js file

// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
      file: 'dist/project1.bundle.js',
      format: 'cjs'
    }
  };

This has given me the basic setup for creating a development build for my new project. I execute the build by running

npm run build rollup.config.dev.js

.

This creates as expected an output file in the dist folder called project1.bundle.js which can be distributed for use as the front end javascript project.