Add IIFE script version to dist

GoogleChrome · Jun 2, 2021 · e83a090 · e83a090
1 parent e20501c
commit e83a090
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -113,7 +113,7 @@ The recommended way to use the `web-vitals` package is to install it from npm an
 
 The following examples show how to load `web-vitals` from [unpkg.com](https://unpkg.com), whether your targeting just Chromium-based browsers (using the "standard" version) or additional browsers (using the "base+polyfill" version):
 
-**Load the "standard" version** (using a module script)
+**Load the "standard" version** _(using a module script)_
 
 ```html
 <!-- Append the `?module` param to load the module version of `web-vitals` -->
@@ -132,7 +132,7 @@ The following examples show how to load `web-vitals` from [unpkg.com](https://un
 <script>
 (function() {
   var script = document.createElement('script');
-  script.src = 'https://unpkg.com/web-vitals';
+  script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js';
   script.onload = function() {
     // When loading `web-vitals` using a classic script, all the public
     // methods can be found on the `webVitals` global namespace.
@@ -161,7 +161,7 @@ The following examples show how to load `web-vitals` from [unpkg.com](https://un
     <script>
     (function() {
       var script = document.createElement('script');
-      script.src = 'https://unpkg.com/web-vitals';
+      script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js';
       script.onload = function() {
         // When loading `web-vitals` using a classic script, all the public
         // methods can be found on the `webVitals` global namespace.

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "test": "npm-run-all build -p -r test:*",
     "test:e2e": "wdio wdio.conf.js",
     "test:server": "node test/server.js",
-    "start": "run-p watch test:server",
+    "start": "run-s build:ts test:server watch",
     "watch": "run-p watch:*",
     "watch:ts": "tsc -b -w",
     "watch:js": "rollup -c -w",

diff --git a/rollup.config.js b/rollup.config.js
@@ -32,7 +32,10 @@ const configurePlugins = ({module, polyfill = false}) => {
       compress: true,
     }),
     replace({
-      'self.__WEB_VITALS_POLYFILL__': polyfill,
+      values: {
+        'self.__WEB_VITALS_POLYFILL__': polyfill,
+      },
+      preventAssignment: true,
     })
   ]
 }
@@ -55,6 +58,15 @@ const configs = [
     },
     plugins: configurePlugins({module: false, polyfill: false}),
   },
+  {
+    input: 'dist/modules/index.js',
+    output: {
+      format: 'iife',
+      file: './dist/web-vitals.iife.js',
+      name: 'webVitals',
+    },
+    plugins: configurePlugins({module: false, polyfill: false}),
+  },
   {
     input: 'dist/modules/index.js',
     output: {
@@ -73,6 +85,16 @@ const configs = [
     },
     plugins: configurePlugins({module: false, polyfill: true}),
   },
+  {
+    input: 'dist/modules/index.js',
+    output: {
+      format: 'iife',
+      file: `./dist/web-vitals.base.iife.js`,
+      name: 'webVitals',
+      extend: true,
+    },
+    plugins: configurePlugins({module: false, polyfill: true}),
+  },
   {
     input: 'dist/modules/polyfill.js',
     output: {