Merge pull request #51 from jingsam/build

Build umd library

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": ["es2015"],
+    "plugins": ["transform-runtime"],
+    "comments": false
+}

.npmignore

@@ -3,5 +3,5 @@
 *.yml
 build/
 node_modules/
-local/
+test/
-gulpfile.js
+gulpfile.js

build/webpack.dev.config.js

@@ -47,11 +47,6 @@ module.exports = {
             js: 'babel'
         }
     },
-    // 转es5
-    babel: {
-        presets: ['es2015'],
-        plugins: ['transform-runtime']
-    },
     resolve: {
         // require时省略的扩展名，如：require('module') 不需要module.js
         extensions: ['', '.js', '.vue'],

build/webpack.dist.dev.config.js

@@ -0,0 +1,51 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        main: './src/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: '/dist/',
+        filename: 'iview.js',
+        library: 'iview',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    externals: {
+        'vue': 'Vue'
+    },
+    resolve: {
+        extensions: ['', '.js', '.vue']
+    },
+    module: {
+        loaders: [{
+            test: /\.vue$/,
+            loader: 'vue'
+        }, {
+            test: /\.js$/,
+            loader: 'babel',
+            exclude: /node_modules/
+        }, {
+            test: /\.css$/,
+            loader: 'style!css!autoprefixer'
+        }, {
+            test: /\.less$/,
+            loader: 'style!css!less'
+        }, {
+            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
+            loader: 'url?limit=8192'
+        }, {
+            test: /\.(html|tpl)$/,
+            loader: 'vue-html'
+        }]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"development"'
+            }
+        })
+    ]
+}

build/webpack.dist.prod.config.js

@@ -0,0 +1,57 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        main: './src/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: '/dist/',
+        filename: 'iview.min.js',
+        library: 'iview',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    externals: {
+        'vue': 'Vue'
+    },
+    resolve: {
+        extensions: ['', '.js', '.vue']
+    },
+    module: {
+        loaders: [{
+            test: /\.vue$/,
+            loader: 'vue'
+        }, {
+            test: /\.js$/,
+            loader: 'babel',
+            exclude: /node_modules/
+        }, {
+            test: /\.css$/,
+            loader: 'style!css!autoprefixer'
+        }, {
+            test: /\.less$/,
+            loader: 'style!css!less'
+        }, {
+            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
+            loader: 'url?limit=8192'
+        }, {
+            test: /\.(html|tpl)$/,
+            loader: 'vue-html'
+        }]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.optimize.OccurenceOrderPlugin()
+    ]
+}

package.json

@@ -13,10 +13,13 @@
     "ui",
     "framework"
   ],
-  "main": "src/index.js",
+  "main": "dist/iview.js",
   "scripts": {
-    "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.config.js",
+    "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
-    "build": "gulp --gulpfile build/build-style.js"
+    "build": "gulp --gulpfile build/build-style.js",
+    "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
+    "dist:prod": "webpack --config build/webpack.dist.prod.config.js",
+    "dist": "npm run dist:dev && npm run dist:prod"
   },
   "repository": {
     "type": "git",
@@ -31,7 +34,7 @@
     "popper.js": "^0.6.4"
   },
   "peerDependencies": {
-    "vue": "^1.0.26"
+    "vue": "^1.0.17"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",

src/index.js

@@ -36,22 +36,23 @@ const iview = {
     Badge,
     Breadcrumb,
     BreadcrumbItem: Breadcrumb.Item,
-    Button,
+    iButton: Button,
     ButtonGroup: Button.Group,
     Card,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
     Circle,
-    Col,
+    iCol: Col,
     Collapse,
     Icon,
+    iInput: Input,
     InputNumber,
     LoadingBar,
     Message,
     Modal,
     Notice,
-    Option,
+    iOption: Option,
-    OptionGroup: OptionGroup,
+    OptionGroup,
     Page,
     Panel: Collapse.Panel,
     Poptip,
@@ -59,7 +60,7 @@ const iview = {
     Radio,
     RadioGroup: Radio.Group,
     Row,
-    Select,
+    iSelect: Select,
     Slider,
     Spin,
     Step: Steps.Step,
@@ -68,15 +69,18 @@ const iview = {
     Tag,
     Timeline,
     TimelineItem: Timeline.Item,
-    Tooltip,
+    Tooltip
-
-    iButton: Button,
-    iButtonGroup: Button.Group,
-    iCol: Col,
-    iInput: Input,
-    iOption: Option,
-    iOptionGroup: OptionGroup,
-    iSelect: Select
 };
 
-module.exports = iview;
+const install = function (Vue) {
+    Object.keys(iview).forEach((key) => {
+        Vue.component(key, iview[key])
+    })
+}
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+};
+
+module.exports = Object.assign(iview, {install});

test/routers/button.vue

@@ -169,14 +169,14 @@
     </Button-group>
 </template>
 <script>
-    import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
+    import { iButton, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
-    const ButtonGroup = Button.Group;
+    const ButtonGroup = iButton.Group;
     const RadioGroup = Radio.Group;
     const CheckboxGroup = Checkbox.Group;
 
     export default {
         components: {
-            iButton: Button,
+            iButton,
             ButtonGroup,
             Icon,
             iInput: Input,

test/routers/message.vue

@@ -21,7 +21,7 @@
     export default {
         components: {
             Message,
-            Button,
+            iButton,
             Alert,
             Card,
             Notice,
@@ -121,4 +121,4 @@
 //            });
         }
     }
-</script>
+</script>

test/routers/more.vue

@@ -67,10 +67,10 @@
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
         <Step title="待进行" content="这里是该步骤的描述信息"></Step>
     </Steps>
-    <Button @click="testStatus = 'process'">change Status</Button>
+    <i-button @click="testStatus = 'process'">change Status</i-button>
 </template>
 <script>
-    import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, Button, BackTop, Spin, Steps, Breadcrumb} from 'iview';
+    import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, iButton, BackTop, Spin, Steps, Breadcrumb} from 'iview';
     const TimelineItem = Timeline.Item;
     const Step = Steps.Step;
     const BreadcrumbItem = Breadcrumb.Item;
@@ -85,7 +85,7 @@
             TimelineItem,
             Icon,
             Affix,
-            Button,
+            iButton,
             BackTop,
             Spin,
             Steps,
@@ -94,7 +94,7 @@
             BreadcrumbItem
         },
         props: {
-        
+
         },
         data () {
             return {
@@ -108,7 +108,7 @@
             }
         },
         computed: {
-        
+
         },
         methods: {
             closed (e) {
@@ -130,4 +130,4 @@
             }, 1000)
         }
     }
-</script>
+</script>

test/routers/poptip.vue

@@ -153,10 +153,10 @@
     </div>
 </template>
 <script>
-    import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
+    import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
 
     export default {
-        components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
+        components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
         props: {
 
         },

test/routers/radio.vue

@@ -20,10 +20,10 @@
             <Radio value="印度黑羚"></Radio>
         </Radio-group>
         <br><br>
-        <Button @click="activeKey = '2'">换</Button>
+        <i-button @click="activeKey = '2'">换</i-button>
     </div>
     <Radio :checked.sync="radio">Radio</Radio>
-    <Button @click="radio = !radio">change radio</Button>
+    <i-button @click="radio = !radio">change radio</i-button>
     <br>
     <br>
     <Radio-group :model.sync="phone" type="button">
@@ -145,7 +145,7 @@
     <Checkbox :checked.sync="single"></Checkbox>
 </template>
 <script>
-    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
+    import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
 
     const RadioGroup = Radio.Group;
     const Panel = Collapse.Panel;
@@ -160,7 +160,7 @@
             Icon,
             Collapse,
             Panel,
-            Button,
+            iButton,
             Checkbox,
             CheckboxGroup,
             Switch,
@@ -203,4 +203,4 @@
             LoadingBar.start();
         }
     }
-</script>
+</script>

test/routers/select.vue

@@ -27,18 +27,18 @@
         <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
     </i-select>
     <i-select :model.sync="model7" style="width:200px">
-        <i-option-group label="热门城市">
+        <Option-group label="热门城市">
             <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
-        </i-option-group>
+        </Option-group>
-        <i-option-group label="其它城市">
+        <Option-group label="其它城市">
             <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
-        </i-option-group>
+        </Option-group>
     </i-select>
 </template>
 <script>
-    import { iSelect, iOption, iButton, iOptionGroup } from 'iview';
+    import { iSelect, iOption, iButton, OptionGroup } from 'iview';
     export default {
-        components: { iSelect, iOption, iButton, iOptionGroup },
+        components: { iSelect, iOption, iButton, OptionGroup },
         data () {
             return {
                 cityList: [

test/routers/step.vue

@@ -58,7 +58,7 @@
     </Steps>
 </template>
 <script>
-    import { Page, Steps, Button } from 'iview';
+    import { Page, Steps, iButton } from 'iview';
 
     const Step = Steps.Step;
 
@@ -67,7 +67,7 @@
             Page,
             Steps,
             Step,
-            iButton: Button
+            iButton
         },
         props: {