Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question] How to setup Rollup config?

See original GitHub issue

What’s the proper way to configure my Rollup configuration to compile hyperapp’s JSX into regular JavaScript?

Issue Analytics

State:
Created 6 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

2reactions

bdsomercommented, Jan 1, 2018

@JorgeBucaran This is perfect; thanks!

1reaction

jorgebucarancommented, Jan 1, 2018

Hi @bdsomer! Thanks for trying out Hyperapp. The following instructions worked out for me:

In a new directory, create an <samp>index.html</samp> file:

<!doctype html>
<html>

<body>
<script src="bundle.js"></script>
</body>

</html>

And an <samp>index.js</samp> file:

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

app(state, actions, view, document.body)

Install dependencies:

npm i hyperapp

Install dev dependencies:

npm i -D \
  rollup \
  rollup-plugin-babel \
  rollup-plugin-node-resolve \
  rollup-plugin-uglify \
  babel-core \
  babel-preset-es2015-rollup \
  babel-plugin-transform-react-jsx

Create a <samp>rollup.config.js</samp> file:

import babel from "rollup-plugin-babel"
import resolve from "rollup-plugin-node-resolve"
import uglify from "rollup-plugin-uglify"

export default {
  plugins: [
    babel({
      babelrc: false,
      presets: ["es2015-rollup"],
      plugins: [["transform-react-jsx", { pragma: "h" }]]
    }),
    resolve({
      jsnext: true
    }),
    uglify()
  ]
}

Bundle the application:

$(npm bin)/rollup -cf iife -i index.js -o bundle.js

Open index.html on your browser.

open index.html

Top Results From Across the Web

How To Setup Rollup Config - DEV Community ‍ ‍

The command above will install the rollup node package and update the package.json file located in our application root folder.

rollup.js

Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup...

How to Bundle JavaScript With Rollup — Step-by-Step Tutorial

Step 1: Install Rollup and create a configuration file. ... Next, create a new file called rollup.config.js in the learn-rollup folder. Inside, add...

How To Setup Rollup Config - Dev Induct

Next, create a new file called rollup.config.js in the application root folder. Inside, add the following. export default { input: ...

An Introduction to the Rollup.js JavaScript Bundler - SitePoint

Install Rollup.js ... This permits the rollup command to be run in any project directory containing JavaScript files — such as a PHP,...