CODEWITHSUNDEEP
javascripthtmlbundlevisual-studio-coderollupjs
Dmitry
Dmitry

Reputation: 377

rollup.js_Bundle automatic update

I'm trying to biuld bundling through rollup.js in VSCode.

My directory:

----MyProject
--------\node_modules
-----------\.bin
-----------\rollup
--------index.js
--------index.html
--------bundle.js
--------package-lock.json
--------package.json

In my .html file I have connection with bundle.js, all changes which I'm doing in index.js must automatically be updated in bundle.js. But it's only working when I run in terminal this command: rollup index.js --file bundle.js

My package.json:

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rollup": "^2.34.2"
  }
}

What do I need to do to make this system works automatically?

Upvotes: 1

Views: 526

Answers (1)

Dmitry
Dmitry

Reputation: 377

Firstly, I didn't have config file, so I've created rollup.config.js:

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

const watch = process.env.ROLLUP_WATCH

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    watch && serve('dist'),
    watch && livereload()
  ]
}

Then I added these 2 scripts into package.json:

"build": "rollup -c",
"dev": "rollup -c -w"

And run in terminal: npm run dev

My credits to vladshcherbin for help!

Upvotes: 1

Related Questions