Add fallback bundle

calebeby · calebeby · commit 0aeed36ae703 · 2018-06-18T18:21:14.000-07:00
diff --git a/src/html-plugin.ts b/src/html-plugin.ts
@@ -30,9 +30,10 @@ const htmlTemplate = ({
   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
   <title>Document</title>
   ${entryStyles.map(printStyle).join('\n  ')}
-  ${entryScripts.map(printScript).join('\n  ')}
 </head>
 <body>
+  <script nomodule async src="/nomodule.js"></script>
+  ${entryScripts.map(printScript).join('\n  ')}
 </body>
 </html>`
 
diff --git a/src/index.ts b/src/index.ts
@@ -27,30 +27,55 @@ export const createRollupConfig = (
       },
     }),
   ]
-  const config: RollupConfig = {
-    input: ['src/index.tsx'],
-    experimentalCodeSplitting: true,
-    output: {
-      dir: 'dist',
-      format: 'es',
+  const config: RollupConfig[] = [
+    {
+      input: ['src/index.tsx'],
+      experimentalCodeSplitting: true,
+      output: {
+        dir: 'dist',
+        format: 'es',
+      },
+      plugins: [
+        postcss({
+          extract: 'dist/index.css',
+          minimize: true,
+          modules: {
+            generateScopedName: development
+              ? '[local]-[hash:base64:4]'
+              : '[hash:base64:4]',
+          },
+        }),
+        babel({ babelrc: false, ...babelConfig }),
+        nodeResolve({
+          jsnext: true,
+          extensions: ['.mjs', '.js', '.json', '.ts', '.tsx', '.css'],
+        }),
+        htmlPlugin({ routes, entryStyles: ['index.css'] }),
+      ].concat(development ? [] : prodPlugins),
+    },
+    {
+      input: 'src/index.tsx',
+      output: {
+        file: 'dist/nomodule.js',
+        name: 'nomodule',
+        format: 'iife',
+      },
+      plugins: [
+        postcss({
+          extract: false,
+          modules: {
+            generateScopedName: development
+              ? '[local]-[hash:base64:4]'
+              : '[hash:base64:4]',
+          },
+        }),
+        babel({ babelrc: false, ...babelConfig }),
+        nodeResolve({
+          jsnext: true,
+          extensions: ['.mjs', '.js', '.json', '.ts', '.tsx', '.css'],
+        }),
+      ].concat(development ? [] : prodPlugins),
     },
-    plugins: [
-      postcss({
-        extract: 'dist/index.css',
-        minimize: true,
-        modules: {
-          generateScopedName: development
-            ? '[local]-[hash:base64:4]'
-            : '[hash:base64:4]',
-        },
-      }),
-      babel({ babelrc: false, ...babelConfig }),
-      nodeResolve({
-        jsnext: true,
-        extensions: ['.mjs', '.js', '.json', '.ts', '.tsx', '.css'],
-      }),
-      htmlPlugin({ routes, entryStyles: ['index.css'] }),
-    ].concat(development ? [] : prodPlugins),
-  }
+  ]
   return config
 }
