Build UMD library.

easymomo · Jan 25, 2016 · c1f79ff · c1f79ff
1 parent 5603528
commit c1f79ff
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 11 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,20 @@
+ecmaFeatures:
+  modules: true
+
+rules:
+  indent: [ 1, 2, SwitchCase: 1 ]
+  quotes: [ 1, single ]
+  linebreak-style: [ 1, unix ]
+  semi: [ 1, always ]
+  no-undef: [ 1 ]
+  no-console: [ 0 ]
+  no-unused-vars: [ 1 ]
+  space-infix-ops: [ 1 ]
+  no-multi-spaces: [ 1 ]
+  no-fallthrough: [ 0 ]
+
+env:
+  es6: true
+  browser: true
+
+extends: 'eslint:recommended'
diff --git a/README.MD b/README.MD
@@ -2,14 +2,36 @@
 
 vue-swipe is a touch slider for vue.js.
 
+# Install
+
+```bash
+$ npm install vue-swipe
+```
+
 # Usage
 
-Import this component to your project.
+Import components to your project.
 
 ```JavaScript
-require('vue-swipe')
+// in ES6 modules
+import { Swipe, SwipeItem } from 'vue-swipe';
+
+// in CommonJS
+const { Swipe, SwipeItem } = require('vue-swipe');
+
+// in Global variable
+const { Swipe, SwipeItem } = VueSwipe;
 ```
 
+And register components.
+
+```javascript
+Vue.component('swipe', Swipe);
+Vue.component('swipe-item', SwipeItem);
+```
+
+Work on a Vue instance.
+
 ```HTML
 <swipe>
   <swipe-item class="page1"></swipe-item>
@@ -20,6 +42,8 @@ require('vue-swipe')
 
 # Options
 
+Here list Props on swipe component
+
 | Option | Description |
 | ----- | ----- |
 | speed | Number(default: 300) speed of animation. |
@@ -28,5 +52,19 @@ require('vue-swipe')
 | showIndicators | Boolean (default:true) - show indicators on slider bottom. |
 | prevent | Boolean (default:false) - preventDefault when touch start, useful for some lower version Android Browser(4.2 etc). |
 
+# Develop
+
+Coding with watching and hot-reload.
+
+```bash
+$ npm run dev
+```
+
+Develop on real remote device.
+
+```bash
+$ npm run remote-dev {{ YOUR IP ADDRESS }}
+```
+
 # License
 MIT
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1.0, minimum-scale=1.0">
+  <title>vue-swipe examples</title>
+  <link rel="stylesheet" href="/lib/vue-swipe.css" charset="utf-8">
+  <style>
+    .swipe {
+      height: 200px;
+      color: #fff;
+    }
+    .page1 {
+      background-color: blue;
+    }
+    .page2 {
+      background-color: yellow;
+      color: #000;
+    }
+    .page3 {
+      background-color: red;
+    }
+  </style>
+</head>
+<body>
+  <swipe>
+    <swipe-item class="page1">SUPER BLUE!!</swipe-item>
+    <swipe-item class="page2">SUPER YELLOW!!</swipe-item>
+    <swipe-item class="page3">SUPER RED!!</swipe-item>
+  </swipe>
+  <swipe :speed="900" :auto="0" :show-indicators="false">
+    <swipe-item class="page1">SUPER BLUE!!</swipe-item>
+    <swipe-item class="page2">SUPER YELLOW!!</swipe-item>
+    <swipe-item class="page3">SUPER RED!!</swipe-item>
+  </swipe>
+  <script src="../node_modules/vue/dist/vue.js"></script>
+  <script src="/lib/vue-swipe.js"></script>
+  <script type="text/javascript" src="/example/dist/build.js"></script>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,11 @@
+const vueSwipe = VueSwipe.Swipe;
+const vueSwipeItem = VueSwipe.SwipeItem;
+// import { Swipe as vueSwipe, SwipeItem as vueSwipeItem } from '../src';
+
+new Vue({
+  el: 'body',
+  components: {
+    'swipe': vueSwipe,
+    'swipe-item': vueSwipeItem
+  }
+})
diff --git a/package.json b/package.json
@@ -4,11 +4,14 @@
   "description": "A touch slider for vue.js.",
   "main": "lib/index.js",
   "scripts": {
-    "prepublish": "cp src/*.vue lib & node_modules/babel-cli/bin/babel.js src --out-dir lib"
+    "dev": "webpack-dev-server --config ./webpack.example.config.js --inline --hot",
+    "remote-dev": "npm run dev --host",
+    "build": "webpack -p",
+    "prepublish": "npm run build"
   },
-  "repository" : {
-    "type" : "git",
-    "url" : "https://github.com/ElemeFE/vue-swipe.git"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ElemeFE/vue-swipe.git"
   },
   "babel": {
     "presets": [
@@ -30,6 +33,21 @@
     "babel-core": "^6.3.15",
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.3.13",
-    "webpack": "^1.12.9"
+    "babel-plugin-transform-runtime": "^6.3.13",
+    "css-loader": "^0.23.1",
+    "eslint": "^1.10.3",
+    "eslint-loader": "^1.1.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.7",
+    "vue-hot-reload-api": "^1.2.2",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^7.3.0",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.14.0"
+  },
+  "dependencies": {
+    "wind-dom": "0.0.3"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Swipe from './swipe.vue';
+import SwipeItem from './swipe-item.vue';
 
-Vue.component('Swipe', require('./swipe.vue'));
-Vue.component('SwipeItem', require('./swipe-item.vue'));
+export { Swipe, SwipeItem };
diff --git a/src/swipe.vue b/src/swipe.vue
@@ -101,7 +101,7 @@
         pages: [],
         timer: null,
         reInitTimer: null
-      }
+      };
     },
 
     props: {

diff --git a/webpack.base.js b/webpack.base.js
@@ -0,0 +1,14 @@
+/*eslint-env node */
+module.exports = {
+  module: {
+    loaders: [
+      { test: /\.vue$/, loader: 'vue' },
+      { test: /\.js$/, loader: 'babel' }
+    ]
+  },
+  vue: {
+    loaders: {
+      js: 'babel!eslint'
+    }
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,16 @@
+/*eslint-env node */
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+var options = require('./webpack.base.js');
+options.entry = './src';
+options.output = {
+  library: 'VueSwipe',
+  libraryTarget: 'umd',
+  filename: 'vue-swipe.js',
+  path: './lib'
+};
+options.externals = {
+  vue: 'Vue'
+};
+options.plugins = [new ExtractTextPlugin('vue-swipe.css')];
+options.vue.loaders.css = ExtractTextPlugin.extract('style', 'css');
+module.exports = options;
diff --git a/webpack.example.config.js b/webpack.example.config.js
@@ -0,0 +1,8 @@
+/*eslint-env node */
+var options = require('./webpack.base.js');
+options.entry = './example';
+options.output = {
+  filename: './example/dist/build.js',
+  publicPath: '/'
+};
+module.exports = options;