Skip to content

Commit c6cd91c

Browse files
alexeaglealexeagle
committed
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
1 parent cc20e57 commit c6cd91c

File tree

16 files changed

+2330
-61
lines changed

16 files changed

+2330
-61
lines changed

‎examples/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ example_integration_test(
8888
name = "examples_webapp",
8989
npm_packages = {
9090
"//packages/protractor:npm_package": "@bazel/protractor",
91+
"//packages/rollup:npm_package": "@bazel/rollup",
92+
"//packages/terser:npm_package": "@bazel/terser",
9193
},
9294
)
9395

‎examples/webapp/BUILD.bazel

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,60 @@
1-
load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
2-
31
# TODO(alexeagle): promote web_package rule to the public API
42
load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
3+
load("@npm//@babel/cli:index.bzl", "babel")
54
load("@npm//http-server:index.bzl", "http_server")
65
load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
6+
load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
7+
load("@npm_bazel_terser//:index.bzl", "terser_minified")
78

89
rollup_bundle(
9-
name = "bundle",
10+
name = "chunks",
1011
srcs = glob(["*.js"]),
11-
entry_point = ":index.js",
12+
entry_point = "index.js",
13+
output_dir = True,
14+
)
15+
16+
# For older browsers, we'll transform the output chunks to es5 + systemjs loader
17+
babel(
18+
name = "chunks_es5",
19+
args = [
20+
"$(location chunks)",
21+
"--config-file",
22+
"$(location es5.babelrc)",
23+
"--out-dir",
24+
"$@",
25+
],
26+
data = [
27+
"chunks",
28+
"es5.babelrc",
29+
"@npm//@babel/preset-env",
30+
],
31+
output_dir = True,
32+
)
33+
34+
# Run terser against both modern and legacy browser chunks
35+
terser_minified(
36+
name = "chunks_es5.min",
37+
src = "chunks_es5",
38+
)
39+
40+
terser_minified(
41+
name = "chunks.min",
42+
src = "chunks",
1243
)
1344

1445
web_package(
1546
name = "package",
47+
# FIXME: need something like:
48+
# entry_point = "index.js",
1649
assets = [
17-
# For differential loading, we supply both an ESModule entry point and an es5 entry point
18-
# The injector will put two complimentary script tags in the index.html
19-
":bundle.min.js",
20-
":bundle.min.es2015.js",
2150
"styles.css",
2251
],
2352
data = [
2453
"favicon.png",
25-
":bundle",
54+
# For differential loading, we supply both ESModule chunks and es5 chunks.
55+
# The injector will put two complimentary script tags in the index.html
56+
":chunks.min",
57+
":chunks_es5.min",
2658
],
2759
index_html = "index.html",
2860
)

‎examples/webapp/es5.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": "systemjs"
7+
}
8+
]
9+
]
10+
}

‎examples/webapp/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<head>
33
<title>rules_nodejs webapp example</title>
44
<link rel="icon" href="/favicon.png">
5-
<!-- CSS will be linked here -->
5+
<!-- CSS will be linked here from web_package#assets -->
66
</head>
7-
<!-- JS scripts will be included here -->
7+
<!-- TODO: figure out how diff. loading interacts with
8+
https://www.npmjs.com/package/rollup-plugin-bundle-html -->
9+
<script type="module" src="/chunks.min/chunks.js"></script>
10+
<script nomodule="" src="/chunks_es5.min/chunks.js"></script>
811
</html>

‎examples/webapp/index.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import {hello} from './strings.en';
2-
const el = document.createElement('div');
3-
el.innerText = hello;
4-
el.className = 'ts1';
5-
document.body.appendChild(el);
1+
// clang-format off
2+
import('./strings.en').then(m => {
3+
const msg = document.createElement('div');
4+
msg.innerText = m.hello();
5+
msg.className = 'ts1';
6+
document.body.appendChild(msg);
7+
});

‎examples/webapp/package.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
{
22
"private": true,
33
"devDependencies": {
4+
"@babel/cli": "^7.6.0",
5+
"@babel/core": "^7.6.0",
6+
"@babel/preset-env": "^7.6.0",
7+
"@bazel/rollup": "latest",
8+
"@bazel/terser": "latest",
49
"@bazel/protractor": "latest",
5-
"http-server": "^0.11.1"
10+
"http-server": "^0.11.1",
11+
"terser": "^4.3.1",
12+
"rollup": "1.21.4"
613
},
714
"scripts": {
815
"test": "bazel test ..."

‎examples/webapp/strings.en.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export const hello = 'Hello Webapp';
1+
export function hello() {
2+
return 'Hello Webapp';
3+
}

0 commit comments

Comments
 (0)