How to use @open-wc/building-utils - 10 common examples

function createTestLoaderBrowserScript(compatibilityMode, polyfills, importMap) {
  const loadPolyfillsWithFeatureDetectionScript = createPolyfillsLoaderScript(
    polyfills,
    defaultPolyfillsConfig,
    'loadPolyfillsWithFeatureDetection',
  );
  // polyfills without a test don't require feature detection and are not included in the generic loader scriptˆ
  const polyfillsWithoutFeatureDetection = polyfills.filter(p => !p.test);

  // load core-js separately so that we can use Promise in the loader
  const indexOfCoreJs = polyfillsWithoutFeatureDetection.findIndex(p => p.name === 'core-js');
  const coreJs =
    indexOfCoreJs === -1 ? null : polyfillsWithoutFeatureDetection.splice(indexOfCoreJs, 1)[0];

  const polyfillsWithoutFeatureDetectionString = polyfillsWithoutFeatureDetection
    .map(p => `{ tagName: 'script', props: { src: '/polyfills/${p.name}.${p.hash}.js', noModule: ${Boolean(p.nomodule)} } }`)
    .join(',');

},
          htmlMinifier: {
            collapseWhitespace: true,
            removeComments: true,
            caseSensitive: true,
            minifyCSS: customMinifyCss,
          },
        },
      ],
    ].filter(_ => !!_),

    presets: [
      [
        '@babel/preset-env',
        {
          targets: findSupportedBrowsers(),
          // preset-env compiles template literals for safari 12 due to a small bug which
          // doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
          exclude: ['@babel/plugin-transform-template-literals'],
          useBuiltIns: false,
          modules: false,
        },
      ],
    ],
  }),

  // only minify if in production
  production && terser()
];

const outputOptions = [
  {

conservativeCollapse: true,
                      removeComments: true,
                      caseSensitive: true,
                      minifyCSS: customMinifyCSS,
                    },
                  },
                ],
                // webpack does not support import.meta.url yet, so we rewrite them in babel
                [require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
              ].filter(_ => !!_),

              presets: [
                [
                  require.resolve('@babel/preset-env'),
                  {
                    targets: findSupportedBrowsers(),
                    // preset-env compiles template literals for safari 12 due to a small bug which
                    // doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
                    exclude: ['@babel/plugin-transform-template-literals'],
                    useBuiltIns: false,
                    modules: false,
                  },
                ],
              ],
            },
          },
        },
      ].filter(_ => !!_),
    },

    optimization: {
      minimizer: [

htmlMinifier: {
                  collapseWhitespace: true,
                  conservativeCollapse: true,
                  removeComments: true,
                  caseSensitive: true,
                  minifyCSS: customMinifyCss,
                },
              },
            ],
          ].filter(_ => !!_),

          presets: [
            [
              require.resolve('@babel/preset-env'),
              {
                targets: legacy ? ['ie 11'] : findSupportedBrowsers(),
                // preset-env compiles template literals for safari 12 due to a small bug which
                // doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
                exclude: legacy ? undefined : ['@babel/plugin-transform-template-literals'],
                useBuiltIns: false,
                modules: false,
              },
            ],
          ],
        }),

      // only minify if in production
      production && terser(),

      production &&
        options.plugins.workbox &&
        !legacy &&

conservativeCollapse: true,
                      removeComments: true,
                      caseSensitive: true,
                      minifyCSS: customMinifyCSS,
                    },
                  },
                ],
                // webpack does not support import.meta.url yet, so we rewrite them in babel
                [require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
              ].filter(_ => !!_),

              presets: [
                [
                  require.resolve('@babel/preset-env'),
                  {
                    targets: legacy ? ['ie 11'] : findSupportedBrowsers(),
                    // preset-env compiles template literals for safari 12 due to a small bug which
                    // doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
                    exclude: legacy ? undefined : ['@babel/plugin-transform-template-literals'],
                    useBuiltIns: false,
                    modules: false,
                  },
                ],
              ],
            },
          },
        },
      ].filter(_ => !!_),
    },

    optimization: {
      minimizer: [

require.resolve('@babel/plugin-syntax-dynamic-import'),
      require.resolve('@babel/plugin-syntax-import-meta'),
    ],
    sourceType: 'module',
    // only read the user's babelrc and config if explicitly enabled
    babelrc: readUserBabelConfig,
    configFile: readUserBabelConfig,
  };
}

const modernConfig = {
  presets: [
    [
      require.resolve('@babel/preset-env'),
      {
        targets: findSupportedBrowsers(),
        useBuiltIns: false,
        modules: false,
      },
    ],
  ],
};

const legacyConfig = {
  presets: [
    [
      require.resolve('@babel/preset-env'),
      {
        targets: ['ie 11'],
        useBuiltIns: false,
        modules: 'systemjs',
      },

require.resolve('@babel/plugin-syntax-dynamic-import'),
      require.resolve('@babel/plugin-syntax-import-meta'),
    ],
    sourceType: 'module',
    // only read the user's babelrc if explicitly enabled
    babelrc,
    sourceMap: 'inline',
  };
}

const modernConfig = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: findSupportedBrowsers(),
        useBuiltIns: false,
        modules: false,
      },
    ],
  ],
};

const legacyConfig = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: ['ie 11'],
        useBuiltIns: false,
        modules: 'systemjs',
      },

htmlMinifier: {
                  collapseWhitespace: true,
                  conservativeCollapse: true,
                  removeComments: true,
                  caseSensitive: true,
                  minifyCSS: customMinifyCss,
                },
              },
            ],
          ].filter(_ => !!_),

          presets: [
            [
              require.resolve('@babel/preset-env'),
              {
                targets: findSupportedBrowsers(),
                // preset-env compiles template literals for safari 12 due to a small bug which
                // doesn't affect most use cases. for example lit-html handles it: (https://github.com/Polymer/lit-html/issues/575)
                exclude: ['@babel/plugin-transform-template-literals'],
                useBuiltIns: false,
                modules: false,
              },
            ],
          ],
        }),

      // only minify if in production
      production && terser(),

      production && options.plugins.workbox && generateSW(getWorkboxConfig(options.outputDir)),
    ],
  };

load(id) {
      const inlineEntryId = findInlineEntryId(id);
      // if this is an inline entry, take the inline module index from the import and return it's content
      if (typeof inlineEntryId === 'number') {
        return inlineModules[inlineEntryId];
      }

      // defer loading to other plugins / rollup
      return null;
    },

resolveId(source, importer) {
      // if this is an inline entry keep it, load() will take ca,re of it
      if (typeof findInlineEntryId(source) === 'number') {
        return source;
      }

      if (Array.isArray(inlineImportMaps) && inlineImportMaps.length > 0) {
        // exclude entry points as they may get provided as `main.js` without a path
        // which would be considered bare module according to import map spec
        if (
          rollupOptions.input &&
          Array.isArray(rollupOptions.input) &&
          rollupOptions.input.includes(source)
        ) {
          return null;
        }
        const { rootDir = process.cwd() } = localPluginConfig;

        const basePath = importer ? importer.replace(rootDir, `${rootDir}::`) : `${rootDir}::`;