Integrate rollup with typescript

[plastikfan]

See:

• How to setup a Typescript project using Rollup JS

[plastikfan]

Rollup gives us transpilation as well as bundling, but its the bundling we need, because the Typescript already provdies us with transpilation.

[plastikfan]

The tutorial linked above uses @open-wc/building-rollup to minimise our local rollup config. Although well meaning, hiding parts of your config in the name of simplicity can cause confusion, especially if you define options on your local config that is in-compatible with the hidden away config; case in point it uses [hash] for output fle names, which is not very useful and also it use the 'dir' option which means we can't also define the output file name. This was just confusing and just ended up wasting time.

So I've taken the approach of reviewing the default config and then simply incluing that inside my local config, so I can see exactly what is being specified.

For full list of rollup config options, see: Big List of Options

[plastikfan]

Looks like we can integrate the mangling and minification of the output by using terser as a plugin directly inside rollup. (See the example here) I discovered thius by look at the default config created by @open-wc/building-rollup which is:

const basic = {
  "preserveEntrySignatures": false,
  "treeshake": true,
  "output": {
    "entryFileNames": "[hash].js",
    "chunkFileNames": "[hash].js",
    "assetFileNames": "[hash][extname]",
    "format": "es",
    "dir": "dist",
    "plugins": []
  },
  "plugins": [{ "name": "node-resolve" }, { "name": "babel" }, { "name": "terser" }]
}

My initial rollup looks something like this:

  export default {
    input: './out-tsc/main.js',
    output: {
      "format": "es",
      file: 'dist/starter-bundle.js',
      "plugins": []
    },
    plugins: [],
    treeshake: true,
    preserveEntrySignatures: false,
  }

which illustrates that it takes its input from the generated output of typescript (out-tsc).

Going forward, when gulp is introduced, it may be better to link these differewnt stages together with streams via the gulp pipe command. This is much more efficient because the file system can be bypassed, data is pipe from from stage to the next via a stream. What this means ius that the rollup input would no longer be defined the way it has been above.

[plastikfan]

The above config is not quite right. This entry is problematic:

preserveEntrySignatures: false

Leaving this in just results in the entry code not being including in the bundle, for whatever reason, so it has been removed until it well understood what its for,