Makefile: Add support to use babel to compile React code using JSX

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.

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"
+      ]
+    }
+  }
+}

diff --git a/Makefile b/Makefile
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
 
 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
 
 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
 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=%) \
        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
                --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:
 
 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