simplify examples setup

sarvex · Jul 28, 2016 · 069109b · 069109b
1 parent 94d85b5
commit 069109b
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 83 deletions.
diff --git a/examples/chat/main.js → examples/chat/app.js b/examples/chat/main.js → examples/chat/app.js
diff --git a/examples/chat/index.html b/examples/chat/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="build.js"></script>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/chat.js"></script>
   </body>
 </html>
diff --git a/examples/counter-hot/main.js → examples/counter-hot/app.js b/examples/counter-hot/main.js → examples/counter-hot/app.js
diff --git a/examples/counter-hot/index.html b/examples/counter-hot/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>vuex counter example</title>
+    <link rel="stylesheet" href="/global.css">
   </head>
   <body>
     <div id="app"></div>
-    <script src="build.js"></script>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/counter-hot.js"></script>
   </body>
 </html>
diff --git a/examples/counter/main.js → examples/counter/app.js b/examples/counter/main.js → examples/counter/app.js
diff --git a/examples/counter/index.html b/examples/counter/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>vuex counter example</title>
+    <link rel="stylesheet" href="/global.css">
   </head>
   <body>
     <div id="app"></div>
-    <script src="build.js"></script>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/counter.js"></script>
   </body>
 </html>
diff --git a/examples/global.css b/examples/global.css
@@ -0,0 +1,18 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #2c3e50;
+}
+
+ul {
+  line-height: 1.5em;
+  padding-left: 1.5em;
+}
+
+a {
+  color: #7f8c8d;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #4fc08d;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vuex Examples</title>
+    <link rel="stylesheet" href="/global.css">
+  </head>
+  <body style="padding: 0 20px">
+    <h1>Vuex Examples</h1>
+    <ul>
+      <li><a href="counter">Counter</a></li>
+      <li><a href="counter-hot">Counter with Hot Reload</a></li>
+      <li><a href="shopping-cart">Shopping Cart</a></li>
+      <li><a href="todomvc">TodoMVC</a></li>
+      <li><a href="chat">FluxChat</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/examples/shopping-cart/main.js → examples/shopping-cart/app.js b/examples/shopping-cart/main.js → examples/shopping-cart/app.js
diff --git a/examples/shopping-cart/index.html b/examples/shopping-cart/index.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>vuex shopping cart example</title>
+    <link rel="stylesheet" href="/global.css">
   </head>
   <body>
     <div id="app"></div>
-    <script src="build.js"></script>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/shopping-cart.js"></script>
   </body>
 </html>
diff --git a/examples/todomvc/main.js → examples/todomvc/app.js b/examples/todomvc/main.js → examples/todomvc/app.js
diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="build.js"></script>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/todomvc.js"></script>
   </body>
 </html>
diff --git a/examples/webpack.build-all.config.js b/examples/webpack.build-all.config.js
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -0,0 +1,46 @@
+const fs = require('fs')
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+
+  devtool: 'inline-source-map',
+
+  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
+    const fullDir = path.join(__dirname, dir)
+    const entry = path.join(fullDir, 'app.js')
+    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
+      entries[dir] = entry
+    }
+
+    return entries
+  }, {}),
+
+  output: {
+    path: path.join(__dirname, '__build__'),
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
+      { test: /\.vue$/, loader: 'vue' }
+    ]
+  },
+
+  resolve: {
+    alias: {
+      vuex: path.resolve(__dirname, '../build/dev-entry')
+    }
+  },
+
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('shared.js'),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    })
+  ]
+
+}
diff --git a/examples/webpack.shared.config.js b/examples/webpack.shared.config.js
diff --git a/package.json b/package.json
@@ -9,19 +9,14 @@
     "logger.js"
   ],
   "scripts": {
-    "counter": "cd examples/counter && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "counter-hot": "cd examples/counter-hot && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "todomvc": "cd examples/todomvc && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "cart": "cd examples/shopping-cart && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "chat": "cd examples/chat && webpack-dev-server --inline --hot --config ../webpack.shared.config.js",
-    "build": "node build/build.js",
-    "build-examples": "BABEL_ENV=development webpack --config examples/webpack.build-all.config.js",
+    "dev": "cd examples && webpack-dev-server --inline --hot --no-info",
     "test": "eslint src && npm run test:unit && npm run test:e2e",
-    "test:unit": "cross-env BABEL_ENV=development jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
+    "test:unit": "jasmine JASMINE_CONFIG_PATH=test/unit/jasmine.json",
     "test:e2e": "npm run build-examples && casperjs test --concise ./test/e2e",
+    "build": "node build/build.js",
+    "release": "bash build/release.sh",
     "docs": "cd docs && gitbook serve",
-    "deploy-docs": "cd docs && ./deploy.sh",
-    "release": "bash build/release.sh"
+    "docs:deploy": "cd docs && ./deploy.sh"
   },
   "repository": {
     "type": "git",