Change to webpack build

Previously this module was designed as a jspm module for working with Bigcommerce themes. However, having it available as a generic npm module ensures that it's more flexible and reusable with future projects. Because jspm has been removed as a dependency, we need to ensure the build process bundles without requiring Systemjs. - Move some files around to keep project organized: source files "src" - Move all the demo files into one directory - Set up and install webpack with a configuration for building the module, as well as a configuration for running the demo locally - Update the dependencies/package/readme - Start a changelog so we have a record moving foward of changes applied to the module
springmerchant · Aug 16, 2016 · 1b86db2 · 1b86db2
1 parent 93bac75
commit 1b86db2
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 120 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["es2015"] }
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,43 @@
+{
+  "rules": {
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "quotes": [2, "single", "avoid-escape"],
+    "linebreak-style": [2, "unix"],
+    "semi": [2, "always"],
+    "comma-dangle": [2, "always-multiline"],
+    "brace-style": [2, "1tbs", {"allowSingleLine": true}],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": [2, {"int32Hint": false}],
+    "eol-last": 2,
+    "linebreak-style": 2,
+    "no-var": 2,
+    "no-const-assign": 2,
+    "prefer-const": 2,
+    "comma-style": [2, "last"],
+    "one-var": [2, "never"],
+    "eqeqeq": [2, "smart"],
+    "camelcase": [2, {"properties": "always"}],
+    "no-this-before-super": 2,
+    "prefer-arrow-callback": 2,
+    "prefer-spread": 2,
+    "prefer-template": 2,
+    "constructor-super": 2,
+    "object-shorthand": 2,
+    "no-loop-func": 2,
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jquery": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "ecmaFeatures": {
+    "modules": true,
+    "classes": true,
+    "spread": true,
+    "forOf": true,
+    "blockBindings": true,
+    "arrowFunctions": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
-jspm_packages
 node_modules
+
+# Demo script is generated when run
+demo/script.js
diff --git a/build.js b/build.js
diff --git a/changelog.md b/changelog.md
@@ -0,0 +1,19 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+##[ 0.5.0 ] - 2016-04-11
+
+### Changed
+- Module now makes use of webpack for compilation and local development server
+- Moved some files around: packaged / minified module is available under `dist`
+  while source code / unminified code is all under `src`
+- Converted the module to work now with npm instead of just jspm
+- Getting changes prepared for a potential 1.0 release that will work across
+  different projects / platforms
+
+##[ 0.3.1 ] - 2016-04-08
+
+- Original version of the module: works well with most of our first two or
+  three rounds of Bigcommerce themes. Specifically required JSPM.
diff --git a/config.js b/config.js
diff --git a/index.html → demo/index.html b/index.html → demo/index.html
@@ -2,9 +2,9 @@
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
-    <link rel="stylesheet" type="text/css" href="demo/style.css">
-    <link rel="stylesheet" type="text/css" href="demo/tabs.css">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
   </head>
   <body>
     <div id="main">
@@ -57,10 +57,5 @@ <h2>Hidden (Star Trek)</h2>
 
     </div>
 
-    <script type="text/javascript" src="jspm_packages/system.js"></script>
-    <script type="text/javascript" src="config.js"></script>
-    <script type="text/javascript">
-      System.import('demo/js/app')
-    </script>
   </body>
 </html>
diff --git a/demo/style.css b/demo/style.css
@@ -1,3 +1,7 @@
+/*  Styles for the demo page 
+    Tab specific styling is included automagically as part of webpack module
+*/
+
 #main {
   margin: 0 auto;
   max-width: 800px;

diff --git a/demo/tabs.css b/demo/tabs.css
diff --git a/package.json b/package.json
@@ -1,31 +1,30 @@
 {
   "name": "bc-tabs",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": true,
-  "description": "Bigcommerce Tabs UI Module",
+  "description": "Pixel Unions Tabs UI Module",
+  "main": "./dist/tabs.min.js",
   "devDependencies": {
-    "finalhandler": "^0.3.3",
-    "serve-static": "^1.8.1",
-    "nodemon": "^1.3.7",
-    "node-sass": "^3.1.2"
+    "babel-core": "^6.7.6",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "css-loader": "^0.23.1",
+    "node-sass": "^3.4.2",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.15",
+    "webpack-dev-server": "^1.14.1"
   },
   "scripts": {
-    "serve": "nodemon server.js",
-    "build": "node ./build.js"
+    "demo": "webpack-dev-server --content-base demo/ --hot"
   },
   "license": "MIT",
   "jspm": {
-    "main": "js/tabs",
-    "directories": {
-      "lib": "dist"
-    },
     "dependencies": {
       "jquery": "github:components/jquery@^2.1.4"
-    },
-    "devDependencies": {
-      "babel": "npm:[email protected]",
-      "babel-runtime": "npm:[email protected]",
-      "core-js": "npm:core-js@^0.8.4"
     }
+  },
+  "dependencies": {
+    "jquery": "^2.1.4"
   }
 }
diff --git a/readme.md b/readme.md
@@ -1,45 +1,45 @@
 # Bigcommerce Tabs UI Module
 
 Create a tabbed UI element
-### TODO
+
+## TODO
 - Update `_toggleClasses` to allow for accordion layout.
 - Add responsive setting that allows tabbed UI to break down into accordion at smaller screen sizes
 
-### Installation
+## Installation
 
 ```
 jspm install --save bc-tabs=bitbucket:pixelunion/bc-tabs
 ```
 
 
-
-### Options
+## Options
 
 All options are optional.
 
-#### `moduleSelector`
+### `moduleSelector`
 The jQuery object of the tab nav container. defaults to `$('[data-tabs]')`.
 
-#### `titleSelector`
+### `titleSelector`
 The jQuery object of the tab nav `<li>` element. defaults to `$('.tab-title')`.
 
-#### `activeClass`
+### `activeClass`
 Class given to both the nav element and content container for the currently active tab.
 
-#### `afterSetup`
+### `afterSetup`
 Callback function called once the tabs have been initialized. Gets passed the id of the currently active tab.
 
-#### `afterChange`
+### `afterChange`
 Callback function called when a tab is clicked. Gets passed the id of the clicked tab.
 
-#### `tabHistory`
+### `tabHistory`
 Leverage the history API for tab chages. Defaults to `false`.
 
 
 
-### Some sample markup
+## Some sample markup
 
-#### Tabs
+### Tabs
 ```
 <ul class="tabs" data-tabs>
   <li class="tab-title"><a href="#featured-products">Featured Products</a></li>
@@ -55,7 +55,7 @@ Leverage the history API for tab chages. Defaults to `false`.
 </div>
 ```
 
-#### Accordion
+### Accordion
 ```
 <section data-tabs>
   <h2 class="tab-title"><a href="#hello">tab</a></h2>
@@ -86,7 +86,7 @@ this.tabs = new Tabs({
 this.tabs.displayTabContent('#leave-review');
 ```
 
-#### SCSS
+### SCSS
 ```
 // Style the tab themselves.
 .tab-title {
@@ -108,11 +108,10 @@ this.tabs.displayTabContent('#leave-review');
 
 ### Further Development
 
-For debugging or improvements you can run a standalone test version of the module using a very basic node server:
+For debugging or improvements you can run a standalone test version of the module using a very basic webpack development server:
 
 ```
 $ npm install
-$ jspm install
-$ npm run serve
+$ npm run demo
 ```
-This will allow you to make changes to the JS and HTML. To re-compile the scss you'll need to run `npm run build` from a separate terminal window after each change.
+This will allow you to make changes to the JS and HTML while working with a live demo in your browser. 
diff --git a/server.js b/server.js
diff --git a/dist/scss/_tabs.scss → src/_tabs.scss b/dist/scss/_tabs.scss → src/_tabs.scss
diff --git a/demo/js/app.js → src/demo.js b/demo/js/app.js → src/demo.js
@@ -1,5 +1,10 @@
+// Basic script to power the demo page, imports tab modules and instantiates
+
 import $ from 'jquery';
-import Tabs from '../../dist/js/tabs';
+import Tabs from './tabs';
+
+// Include the styling
+require('./_tabs.scss');
 
 const tabs = new Tabs();
 

diff --git a/dist/js/tabs.js → src/tabs.js b/dist/js/tabs.js → src/tabs.js
@@ -1,3 +1,6 @@
+'format es6'
+// Required for JSPM to understand module format
+
 import $ from 'jquery';
 
 export default class Tabs {

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  context: __dirname + "/src",
+  entry: "./demo",
+  output: {
+    path: __dirname + "/demo",
+    filename: "script.js"
+  },
+  externals: {
+  },
+  module: {
+    loaders: [
+      { 
+        test: /\.js$/, 
+        exclude: /node_modules/, 
+        loader: "babel-loader" 
+      },
+      {
+        test: /\.scss$/,
+        loaders: ["style", "css", "sass"]
+      }
+    ]
+  }
+};