Makefile: Add support to use babel to compile React code using JSX
authorCarl Worth <cworth@cworth.org>
Mon, 25 May 2020 19:18:42 +0000 (12:18 -0700)
committerCarl Worth <cworth@cworth.org>
Tue, 26 May 2020 03:52:45 +0000 (20:52 -0700)
This is in preparation for starting to use React to implement LMNO
game clients.

In this commit, the previous "make dev" target is now simply "make",
and the previous "make prod" target is now "make LMNO_BUILD=production".
This latter command is definitely annoying to remember, but should
almost never need to be executed manually; instead the developer will
likely invoke "make deploy" which knows how to do a production build.

.babelrc [new file with mode: 0644]
Makefile
README

diff --git a/.babelrc b/.babelrc
new file mode 100644 (file)
index 0000000..b182744
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": ["react"],
+  "env": {
+    "production": {
+    },
+    "development": {
+      "plugins": [
+        "transform-react-jsx-self",
+        "transform-react-jsx-source"
+      ]
+    }
+  }
+}
index ee69598e27ca527d25bc723cced9f081bd6500c7..74233b0ad221be2a3855440d1b5da92a4dac32f1 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -3,23 +3,54 @@ DEPLOY_DIR=/srv/lmno.games/www
 DO_NOT_DEPLOY=Makefile deps *.jsx .babelrc .gitignore README
 DO_NOT_DELETE=flempires
 
-DEPS=deps/react.development.js \
-deps/react-dom.development.js \
-deps/react.production.min.js \
-deps/react-dom.production.min.js
+REACT_DEPS=react.js react-dom.js
+REACT_DOWNLOADS=\
+  deps/react.development.js \
+  deps/react-dom.development.js \
+  deps/react.production.min.js \
+  deps/react-dom.production.min.js
 
-checksums:
-       sha512sum --strict -c checksums.sha512
+JSX_SOURCE=$(wildcard */*.jsx)
+JS_TARGETS=$(JSX_SOURCE:.jsx=.js)
+
+all: $(JS_TARGETS) $(REACT_DEPS)
+
+# Execute either of the following to build things:
+#
+#    For a development build:
+#
+#      make
+#
+#    For a production build:
+#
+#      make LMNO_BUILD=production
+#
+# Note: To switch between these two, either issue a "make clean"
+#       or otherwise start in a clean source tree (such as a
+#       after a fresh "git clone" or use "git clean -f -x -d).
+#
+ifeq ($(LMNO_BUILD),production)
+react.js: deps/react.production.min.js
+       cp $^ $@
+
+react-dom.js: deps/react-dom.production.min.js
+       cp $^ $@
 
-deps: $(DEPS) checksums
+%.js: %.jsx
+       BABEL_ENV=production babeljs $^ --out-file $@
+else
+react.js: deps/react.development.js
+       cp $^ $@
 
-dev: deps
-       cp deps/react.development.js react.js
-       cp deps/react-dom.development.js react-dom.js
+react-dom.js: deps/react-dom.development.js
+       cp $^ $@
 
-prod: deps
-       cp deps/react.production.min.js react.js
-       cp deps/react-dom.production.min.js react-dom.js
+%.js: %.jsx
+       BABEL_ENV=development babeljs $^ --out-file $@
+endif
+
+checksums: $(REACT_DOWNLOADS)
+       sha512sum --strict -c checksums.sha512
 
 deps/react.development.js:
        wget -nv -nc -P deps https://unpkg.com/react@16/umd/react.development.js
@@ -36,7 +67,7 @@ deps/react-dom.production.min.js:
 deploy:
        rm -rf .deploy-source
        git clone . .deploy-source
-       make -C .deploy-source prod
+       make -C .deploy-source LMNO_BUILD=production
        rm -rf .deploy-source/.git
        (cd .deploy-source; rsync -avz \
                $(DO_NOT_DEPLOY:%=--exclude=%) \
@@ -45,3 +76,8 @@ deploy:
                --delete-after \
                ./ $(DEPLOY_HOST):$(DEPLOY_DIR) )
        rm -rf .deploy-source
+
+clean:
+       rm -f $(JS_TARGETS)
+       rm -f $(REACT_DEPS)
+       rm -f $(REACT_DOWNLOADS)
diff --git a/README b/README
index 599bcdb94e1a0e670a66c853faa6da91ec6ce129..1afb559523710c3909064c81fed7ae140cc92007 100644 (file)
--- a/README
+++ b/README
@@ -7,10 +7,16 @@ verifying 3rd-party resources that are needed.
 The following Makefile targets will be useful while developing this
 code:
 
-  make deps: Download 3rd-party resources to be served by lmno.games
+  make: Download and build JavaScript resources in development mode
 
-  make dev: Configure development versions of "make deps" resources
+  make LMNO_BUILD=production: As above but in production mode
 
-  make prod: Configure production versions of "make deps" resources
+  make deploy: Deploy latest, committed, production-mode content to lmno.games
 
-  make deploy: Deploy latest, committed static content to lmno.games
+Dependencies
+------------
+Compiling the source requires the babel (version 6) CLI to be
+available as "babeljs" along with the "react" preset. This can be
+achieved on Debian with:
+
+       sudo apt install node-babel-cli node-babel-preset-react