使用作为生命创建独立的Web组件版本 [英] Creating a standalone web component build using as an IIFE

问题描述

我已经创建了一个Web组件，用于在任何html内容中显示RASE。

我使用Lit Element Typescript Starter Project作为基线，它附带了rollup.config.js文件。

我将输出格式更改为iife，其余格式保持不变，但组件和包名称除外。我这样做的原因是，我希望可以通过脚本标记轻松地访问包，而ROLLUP说iife格式可以做到这一点。

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

构建似乎运行得很好。这里有一个演示：

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

我只是好奇，自从我将格式从esm更改为iife后，是否有人知道是否应该调整或更改任何其他汇总设置？

推荐答案

汇总配置实际上取决于您要执行的操作。如果它目前适用于您想要做的事情，那么这很好，不需要更改任何内容。

因为它是一个配置文件，如果它不工作，其他一切都取决于您以及您希望从中得到什么。例如，如果您想让它在较旧的浏览器上运行，您可以使用插件@rollup/plugin-babel来转换您的代码。如果您想以UMD和ES的形式提供它，您可以将它们添加到构建步骤中。

汇总文档非常详尽，您应该仔细查看可能的内容：https://rollupjs.org/guide/en/

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

这篇关于使用作为生命创建独立的Web组件版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！