[WIP] Use webpack to build

djhi · djhi · commit 2a39b73c8c69 · 2018-01-10T16:47:54.000+01:00
- [x] Allow usage of the lib inside a browser using script tag
- [x] Allow usage of the binary as before
diff --git a/.babelrc b/.babelrc
@@ -24,6 +24,21 @@
         "external-helpers",
         "transform-runtime"
       ]
+    },
+    "production": {
+      "presets": [
+        [
+          "es2015",
+          {
+            "modules": false
+          }
+        ],
+        "stage-0"
+      ],
+      "plugins": [
+        "external-helpers",
+        "transform-runtime"
+      ]
     }
   }
-}
+}
diff --git a/Makefile b/Makefile
@@ -22,4 +22,7 @@ format: ## Format the source code
 	@./node_modules/.bin/eslint --fix ./src
 
 run: ## Launch server with example data
-	@node ./bin/json-graphql-server.js example/data.js
+	@node ./bin/json-graphql-server.js example/data.js
+
+build:
+	@NODE_ENV=production ./node_modules/.bin/webpack
diff --git a/bin/json-graphql-server.js b/bin/json-graphql-server.js
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-
+require('reify');
 const path = require('path');
 const express = require('express');
 const cors = require('cors');
diff --git a/example/index.html b/example/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
     <head></head>
     <body>
-        <script src="../lib/index.js"></script>
+        <button id="button">Load posts</button>
+        <script src="../lib/json-graphql-server.min.js"></script>
         <script type="text/javascript">
             window.addEventListener('load', function() {
                 const data = {
@@ -32,8 +33,9 @@
                     ],
                 };
 
-                var server = JsonGraphqlServer.graphQLClientServer(data);
-
+                var server = GraphQLClientServer(data);
+            });
+            window.document.getElementById('button').addEventListener('click', function () {            
                 var xhr = new XMLHttpRequest();
                 xhr.responseType = 'json';
                 xhr.open("POST", "http://localhost:3000/graphql", true);
@@ -43,9 +45,11 @@
                     console.error(error);
                 }
                 xhr.onload = function() {
-                    console.log('data returned:', JSON.parse(xhr.responseText));
+                    const result = JSON.parse(xhr.responseText);
+                    console.log('data returned:', result);
+                    alert('Found ' + result.data.allPosts.length + ' posts');
                 }
-                const body = JSON.stringify({ query: 'query Post($id: ID!) { Post(id: $id) { id } }', variables: { id: 1 } });
+                const body = JSON.stringify({ query: 'query allPosts { allPosts { id } }' });
                 xhr.send(body);
             });
         </script>
diff --git a/package.json b/package.json
@@ -3,8 +3,15 @@
     "version": "1.0.2",
     "main": "src/index",
     "repository": "git@github.com:marmelab/json-graphql-server.git",
-    "authors": ["François Zaninotto", "Gildas Garcia"],
-    "files": ["*.md", "src", "bin"],
+    "authors": [
+        "François Zaninotto",
+        "Gildas Garcia"
+    ],
+    "files": [
+        "*.md",
+        "src",
+        "bin"
+    ],
     "license": "MIT",
     "scripts": {
         "format": "make format",
@@ -14,14 +21,18 @@
         "server": "make run"
     },
     "lint-staged": {
-        "src/**/*.js": ["eslint --fix", "git add"]
+        "src/**/*.js": [
+            "eslint --fix",
+            "git add"
+        ]
     },
     "devDependencies": {
         "@types/jest": "~19.2.4",
         "babel-cli": "~6.24.1",
         "babel-core": "~6.25.0",
         "babel-eslint": "~7.2.3",
         "babel-jest": "~20.0.3",
+        "babel-loader": "7.1.2",
         "babel-plugin-add-module-exports": "^0.2.1",
         "babel-plugin-external-helpers": "~6.22.0",
         "babel-plugin-transform-runtime": "~6.23.0",
@@ -36,15 +47,8 @@
         "jest": "~20.0.4",
         "lint-staged": "~3.4.1",
         "prettier": "~1.5.2",
-        "rollup": "~0.43.0",
-        "rollup-plugin-babel": "~2.7.1",
-        "rollup-plugin-commonjs": "~8.0.2",
-        "rollup-plugin-json": "~2.3.0",
-        "rollup-plugin-node-builtins": "~2.1.2",
-        "rollup-plugin-node-globals": "~1.1.0",
-        "rollup-plugin-node-resolve": "~3.0.0",
-        "rollup-watch": "~4.0.0",
-        "supertest": "~3.0.0"
+        "supertest": "~3.0.0",
+        "webpack": "~3.10.0"
     },
     "dependencies": {
         "apollo-client": "~1.2.0",
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/src/graphQLClientServer.js b/src/graphQLClientServer.js
@@ -1,6 +1,6 @@
 import { MockHttpServer } from './mockHttpRequest';
 import { graphql } from 'graphql';
-import getSchemaFromData from './introspection/getSchemaFromData';
+import schemaBuilder from './schemaBuilder';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql 
@@ -42,7 +42,7 @@ import getSchemaFromData from './introspection/getSchemaFromData';
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
 export default function(data, url = 'http://localhost:3000/graphql') {
-    const schema = getSchemaFromData(data);
+    const schema = schemaBuilder(data);
 
     const server = new MockHttpServer(req => {
         if (!req.url.startsWith(url)) {
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,8 @@
-//export { default as createApolloClient } from './createApolloClient';
-require('reify');
+import GraphQLClientServer from './graphQLClientServer';
+export { default as createApolloClient } from './createApolloClient';
+export { default as jsonGraphqlExpress } from './jsonGraphqlExpress';
+export const graphQLClientServer = GraphQLClientServer;
 
-//const graphQLClientServer = require('./graphQLClientServer').default;
-const jsonGraphqlExpress = require('./jsonGraphqlExpress').default;
-
-module.exports = {
-    //graphQLClientServer,
-    jsonGraphqlExpress,
-};
+if (typeof window !== 'undefined') {
+    window.GraphQLClientServer = GraphQLClientServer;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,45 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
+
+let libraryName = 'json-graphql-server';
+
+let plugins = [], outputFile;
+
+if (process.env.NODE_ENV === 'production') {
+    plugins.push(new UglifyJsPlugin({
+        minimize: true,
+        sourceMap: true,
+    }));
+    outputFile = libraryName + '.min.js';
+} else {
+    outputFile = libraryName + '.js';
+}
+
+const config = {
+    entry: __dirname + '/src/index.js',
+    devtool: 'source-map',
+    output: {
+        path: __dirname + '/lib',
+        filename: outputFile,
+        library: libraryName,
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    module: {
+        rules: [
+            {
+                test: /(\.jsx|\.js)$/,
+                loader: 'babel-loader',
+                exclude: /(node_modules|bower_components)/
+            }
+        ]
+    },
+    resolve: {
+        modules: [path.resolve('./node_modules'), path.resolve('./src')],
+        extensions: ['.json', '.js']
+    },
+    plugins: plugins
+};
+
+module.exports = config;
diff --git a/yarn.lock b/yarn.lock
