feat(examples): replace examples/webapp with new rollup_bundle

This demonstrates how to stitch together a complete app. Note that injecting script tags no longer works because rollup_bundle produces only a directory output. We'll try to figure out how to restore that feature. In the meantime we just hard-code script tag paths
bazel-contrib · Sep 20, 2019 · c6cd91c · c6cd91c
1 parent cc20e57
commit c6cd91c
Show file tree

Hide file tree

Showing 16 changed files with 2,330 additions and 61 deletions.
diff --git a/examples/BUILD.bazel b/examples/BUILD.bazel
@@ -88,6 +88,8 @@ example_integration_test(
     name = "examples_webapp",
     npm_packages = {
         "//packages/protractor:npm_package": "@bazel/protractor",
+        "//packages/rollup:npm_package": "@bazel/rollup",
+        "//packages/terser:npm_package": "@bazel/terser",
     },
 )
 

diff --git a/examples/webapp/BUILD.bazel b/examples/webapp/BUILD.bazel
@@ -1,28 +1,60 @@
-load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
-
 # TODO(alexeagle): promote web_package rule to the public API
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm//@babel/cli:index.bzl", "babel")
 load("@npm//http-server:index.bzl", "http_server")
 load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_terser//:index.bzl", "terser_minified")
 
 rollup_bundle(
-    name = "bundle",
+    name = "chunks",
     srcs = glob(["*.js"]),
-    entry_point = ":index.js",
+    entry_point = "index.js",
+    output_dir = True,
+)
+
+# For older browsers, we'll transform the output chunks to es5 + systemjs loader
+babel(
+    name = "chunks_es5",
+    args = [
+        "$(location chunks)",
+        "--config-file",
+        "$(location es5.babelrc)",
+        "--out-dir",
+        "$@",
+    ],
+    data = [
+        "chunks",
+        "es5.babelrc",
+        "@npm//@babel/preset-env",
+    ],
+    output_dir = True,
+)
+
+# Run terser against both modern and legacy browser chunks
+terser_minified(
+    name = "chunks_es5.min",
+    src = "chunks_es5",
+)
+
+terser_minified(
+    name = "chunks.min",
+    src = "chunks",
 )
 
 web_package(
     name = "package",
+    # FIXME: need something like:
+    # entry_point = "index.js",
     assets = [
-        # For differential loading, we supply both an ESModule entry point and an es5 entry point
-        # The injector will put two complimentary script tags in the index.html
-        ":bundle.min.js",
-        ":bundle.min.es2015.js",
         "styles.css",
     ],
     data = [
         "favicon.png",
-        ":bundle",
+        # For differential loading, we supply both ESModule chunks and es5 chunks.
+        # The injector will put two complimentary script tags in the index.html
+        ":chunks.min",
+        ":chunks_es5.min",
     ],
     index_html = "index.html",
 )

diff --git a/examples/webapp/es5.babelrc b/examples/webapp/es5.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": "systemjs"
+      }
+    ]
+  ]
+}
diff --git a/examples/webapp/index.html b/examples/webapp/index.html
@@ -2,7 +2,10 @@
     <head>
         <title>rules_nodejs webapp example</title>
         <link rel="icon" href="/favicon.png">
-        <!-- CSS will be linked here -->
+        <!-- CSS will be linked here from web_package#assets -->
     </head>
-    <!-- JS scripts will be included here -->
+    <!-- TODO: figure out how diff. loading interacts with 
+         https://www.npmjs.com/package/rollup-plugin-bundle-html -->
+    <script type="module" src="/chunks.min/chunks.js"></script>
+    <script nomodule="" src="/chunks_es5.min/chunks.js"></script>
 </html>
diff --git a/examples/webapp/index.js b/examples/webapp/index.js
@@ -1,5 +1,7 @@
-import {hello} from './strings.en';
-const el = document.createElement('div');
-el.innerText = hello;
-el.className = 'ts1';
-document.body.appendChild(el);
+// clang-format off
+import('./strings.en').then(m => {
+    const msg = document.createElement('div');
+    msg.innerText = m.hello();
+    msg.className = 'ts1';
+    document.body.appendChild(msg);
+});
diff --git a/examples/webapp/package.json b/examples/webapp/package.json
@@ -1,8 +1,15 @@
 {
     "private": true,
     "devDependencies": {
+        "@babel/cli": "^7.6.0",
+        "@babel/core": "^7.6.0",
+        "@babel/preset-env": "^7.6.0",
+        "@bazel/rollup": "latest",
+        "@bazel/terser": "latest",
         "@bazel/protractor": "latest",
-        "http-server": "^0.11.1"
+        "http-server": "^0.11.1",
+        "terser": "^4.3.1",
+        "rollup": "1.21.4"
     },
     "scripts": {
         "test": "bazel test ..."

diff --git a/examples/webapp/strings.en.js b/examples/webapp/strings.en.js
@@ -1 +1,3 @@
-export const hello = 'Hello Webapp';
+export function hello() {
+  return 'Hello Webapp';
+}