使用 IIFE 创建独立 web 组件构建

Question

I have create a web component for displaying gists generally in any html content.

I used the Lit Element Typescript Starter Project as a baseline and it comes with a rollup.config.js file.

I changed the output format to iife and left the rest the same, with exception of the component and bundle names. The reason I did this is that I wanted the bundle to be easily accessible via script tags, and rollup says that the iife format does this.

This is the modified rollup.config.js file .

// ============================================
// The configuration is based on the rollup starter
// app found here:
//
// https://github.com/rollup/rollup-starter-app/blob/master/package.json
//
// This project is based
// ============================================


/**
 * @license
 * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import {terser} from 'rollup-plugin-terser';
import replace from '@rollup/plugin-replace';
import filesize from 'rollup-plugin-filesize';

// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'fs-gist.js',
  output: {
    file: 'fs-gist.bundle.js',
    format: 'iife', // immediately-invoked function expression — suitable for <script> tags
    sourcemap: true,
  },
  onwarn(warning) {
    if (warning.code !== 'THIS_IS_UNDEFINED') {
      console.error(`(!) ${warning.message}`);
    }
  },
  plugins: [
    replace({'Reflect.decorate': 'undefined'}),
    resolve(), // tells Rollup how to find date-fns in node_modules
    commonjs(), // converts date-fns to ES modules
    production && terser({
        module: true,
        warnings: true,
        mangle: {
          properties: {
            regex: /^__/,
          },
        },
      }),
      filesize({
        showBrotliSize: true,
      })
  ],
};

The build seems to be working fine. There's a demo here:

https://stackblitz.com/edit/typescript-fs-gist?file=index.ts

Just curious if anyone knows whether any of the other rollup settings should be tweaked or changed since I changed the format to iife from esm ?

Answer 1

Rollup configs really depend on what you want to do. If it works currently for what you want to do, then that's great and nothing needs to be changed.

Since it's a config file, if it's not working, everything else is up to you and what you want out of it. For example, maybe if you want to make it work on older browsers, you would use the plugin @rollup/plugin-babel to transpile your code. If you want to offer it as umd and es, you could add those to the build steps.

The rollup documentation is pretty extensive, and you should look through what's possible: https://rollupjs.org/guide/en/

Once you have a better idea of your project's needs, you can search through the docs for examples of how to add specific plugins, steps, etc.