Javascript 使用作为IIFE创建独立的web组件构建

我创建了一个web组件，用于在任何html内容中显示GIST

我使用了作为基线，它附带了一个

rollup.config.js

文件

我将输出格式更改为

iife

，其余的都保持不变，除了组件和捆绑名称。我这样做的原因是，我希望捆绑包可以通过脚本标记轻松访问，而rollup说，

iLife

格式可以做到这一点

//============================================
//配置基于汇总启动器
//在此处找到应用程序：
//
// https://github.com/rollup/rollup-starter-app/blob/master/package.json
//
//该项目基于
// ============================================
/**
*@许可证
*版权所有（c）2018聚合物项目作者。版权所有。
*此代码只能在位于的BSD样式许可证下使用
* http://polymer.github.io/LICENSE.txt
*全套作者可在以下网址找到：
* http://polymer.github.io/AUTHORS.txt
*完整的贡献者集可在
* http://polymer.github.io/CONTRIBUTORS.txt
*谷歌作为polymer项目的一部分发布的代码也很重要
*根据在上找到的附加知识产权授予
* http://polymer.github.io/PATENTS.txt
*/
从“@rollup/plugin node resolve”导入解析；
从“@rollup/plugin commonjs”导入commonjs；
从'rollup plugin terser'导入{terser}；
从“@rollup/plugin replace”导入replace；
从“汇总插件文件大小”导入文件大小；
//`npm run build`->`production`为真
//`npm run dev`->`production`为false
常数生产=！process.env.ROLLUP\u WATCH；
导出默认值{
输入：“fs gist.js”，
输出：{
文件：“fs gist.bundle.js”，
格式：“iife”，//立即调用的函数表达式-适用于标记
sourcemap:true，
},
onwarn（警告）{
如果（warning.code！==“此\u未定义”）{
console.error（`（！）${warning.message}`）；
}
},
插件：[
替换（{'Reflect.decoration'：'undefined'}），
resolve（），//告诉Rollup如何在节点_模块中查找日期FN
commonjs（），//将日期fns转换为ES模块
生产和精简({
模块：正确，
警告：正确，
裂口：{
特性：{
正则表达式：/^\uuuu/，
},
},
}),
文件大小({
showBrotliSize：没错，
})
],
};

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

---

只是好奇，如果有人知道在我从

esm

将格式更改为

iife

后是否应该调整或更改任何其他汇总设置？

汇总配置实际上取决于您想要做什么。如果它目前对你想做的事情有效，那就太好了，没有什么需要改变的

因为它是一个配置文件，如果它不工作，其他一切都取决于你和你想要从中得到什么。例如，如果您想让它在较旧的浏览器上工作，您可以使用plugin

@rollup/plugin babel

来传输代码。如果您想将其作为umd和es提供，可以将其添加到构建步骤中

汇总文档非常广泛，您应该了解可能的情况：

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

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