use parcel instead of webpack

jsyang · Dec 3, 2018 · 7a5963f · 7a5963f
1 parent c60524a
commit 7a5963f
Show file tree

Hide file tree

Showing 14 changed files with 2,962 additions and 1,380 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@
 .DS_Store
 node_modules/
 yarn-error.log
+.cache
+.env
+dist
diff --git a/client/index.js b/client/index.js
diff --git a/client/main.js b/client/main.js
diff --git a/client/vendors~main.js b/client/vendors~main.js
diff --git a/dev.html b/dev.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+    <title>Celestial Combat</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body style="background: #111; padding: 0; margin: 0">
+    <script src="src/client/index.ts"></script>
+</body>
+<a href="assets.zip"></a>
+</html>
diff --git a/generateDotEnv.js b/generateDotEnv.js
@@ -0,0 +1,7 @@
+const {writeFileSync} = require('fs');
+const child_process   = require('child_process');
+
+const BUILD_HASH = child_process.execSync('git rev-parse --short HEAD').toString();
+const BUILD_DATE = (new Date()).toISOString();
+
+writeFileSync('.env', [`BUILD_HASH=${BUILD_HASH}`, `BUILD_DATE=${BUILD_DATE}`].join('\n'));
diff --git a/index.html b/index.html
@@ -1,8 +1,7 @@
 <html>
 <head>
     <title>Celestial Combat</title>
-    <script src="client/vendors~main.js"></script>
-    <script src="client/main.js"></script>
+    <script src="client/index.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="favicon.png?2">
     <link rel="shortcut icon" href="favicon.png?2">

diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -12,30 +12,27 @@
   },
   "main": "index.js",
   "scripts": {
-    "dev": "NODE_ENV=development node .",
+    "ts-watch": "tsc --noEmit -w -p .",
+    "generate-env": "node generateDotEnv.js",
+    "watch": "yarn generate-env ; parcel dev.html --port 3000",
+    "bundle-js": "yarn generate-env ; NODE_ENV=production parcel build src/client/index.ts --experimental-scope-hoisting --out-dir client",
     "zip-assets": "cd assets ; rm -r .DS_Store ; rm assets.zip ; zip -x '.DS_Store' -r -X ../assets.zip . ",
     "generate-how-to-play-page": "marked -o how-to-play/index.html < src/how-to-play.md",
-    "compile-js": "NODE_ENV=production webpack -p",
-    "build": "yarn compile-js ; yarn generate-how-to-play-page ; yarn zip-assets"
+    "build": "yarn bundle-js ; yarn generate-how-to-play-page ; yarn zip-assets"
   },
+  "staticPath": [
+    "client"
+  ],
   "dependencies": {
-    "@types/express": "^4.0.35",
     "@types/pixi.js": "^4.6.0",
     "@types/sat": "^0.0.30",
-    "express": "^4.15.3",
     "fast-memoize": "^2.5.1",
-    "fork-ts-checker-webpack-plugin": "^0.4.15",
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",
     "marked": "^0.3.9",
+    "parcel-bundler": "^1.10.3",
     "pixi.js": "^4.8.2",
     "sat": "^0.6.0",
-    "ts-loader": "^5.3.0",
-    "typescript": "^3.1.6",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.25.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-config-assign": "^1.0.0",
-    "webpack-dev-middleware": "^1.10.2"
+    "typescript": "^3.2.1"
   }
 }
diff --git a/src/client/UI/Modal/TitleScreenModal.ts b/src/client/UI/Modal/TitleScreenModal.ts
@@ -10,14 +10,11 @@ const onClickGitHub    = () => window.open('http://github.com/jsyang/celestial',
 const width  = 340;
 const height = 360;
 
-declare const BUILD_DATE: string;
-declare const BUILD_HASH: string;
-
 function create({onClickNewGame}) {
     const modal = Modal.create({width, height});
 
     const label = new PIXI.Text(
-        `Build: ${BUILD_DATE} -- ${BUILD_HASH}`,
+        `Build: ${process.env.BUILD_DATE} -- ${process.env.BUILD_HASH}`,
         {
             fontFamily: 'arial',
             fontSize:   12,

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "skipLibCheck": true,
-    "target": "es5",
+    "target": "es6",
     "module": "es6",
     "allowSyntheticDefaultImports": true,
     "alwaysStrict": true,

diff --git a/webpack.config.base.js b/webpack.config.base.js
diff --git a/webpack.config.js b/webpack.config.js