使用 IIFE 創建獨立 web 組件構建

Question

我創建了一個 web 組件，用於在任何 html 內容中顯示要點。

我使用Lit Element Typescript Starter Project作為基准，它帶有一個rollup.config.js文件。

我將 output 格式更改為iife並將 rest 保持不變，但組件和捆綁包名稱除外。 我這樣做的原因是我希望通過腳本標簽可以輕松訪問捆綁包，並且匯總說iife格式可以做到這一點。

這是修改后的rollup.config.js文件。

// ============================================
// 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,
      })
  ],
};

構建似乎工作正常。 這里有一個演示：

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

只是好奇是否有人知道是否應該調整或更改任何其他匯總設置，因為我將格式從iife更改為esm ？

Answer 1

匯總配置實際上取決於您想要做什么。 如果它目前適用於您想要做的事情，那很好，無需更改任何內容。

由於它是一個配置文件，如果它不工作，其他一切都取決於你和你想要什么。 例如，如果你想讓它在舊瀏覽器上運行，你會使用插件@rollup/plugin-babel來轉譯你的代碼。 如果您想以 umd 和 es 的形式提供它，您可以將它們添加到構建步驟中。

匯總文檔非常廣泛，您應該查看可能的內容： https://rollupjs.org/guide/en/

一旦您對項目的需求有了更好的了解，您就可以在文檔中搜索如何添加特定插件、步驟等的示例。