[bug] npm import fixed

.babelrc

@@ -12,9 +12,9 @@
   ],
   "plugins": [
     "transform-runtime",
-    "react-hot-loader/babel"
-    // "transform-object-rest-spread",
-    // "transform-react-jsx"
+    "react-hot-loader/babel",
+    "transform-object-rest-spread",
+    "transform-react-jsx"
       // 开启react代码的模块热替换（HMR）
   ]
 }

app/src/App.js

@@ -1,190 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import Dragger from './Dragger.js'
 import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils'
 
-import './style.css'
-
-const doc = document
-
-class Drager extends React.Component {
-    constructor(...props) {
-        super(...props)
-        this.move = this.move.bind(this)
-        this.onDragEnd = this.onDragEnd.bind(this)
-    }
-
-    static propTypes = {
-        bounds: PropTypes.oneOfType([
-            PropTypes.shape({
-                left: PropTypes.number,
-                right: PropTypes.number,
-                top: PropTypes.number,
-                bottom: PropTypes.number
-            }),
-            PropTypes.string
-        ]),
-        grid: PropTypes.arrayOf(PropTypes.number),
-        allowX: PropTypes.bool,
-        allowY: PropTypes.bool,
-        hasDraggerHandle: PropTypes.bool
-    }
-
-    static defaultProps = {
-        allowX: true,
-        allowY: true,
-        hasDraggerHandle: false
-    };
-
-    state = {
-        x: null,
-        y: null,
-        originX: 0,
-        originY: 0,
-        lastX: 0,
-        lastY: 0
-    }
-
-    componentDidMount() {
-    }
-
-    move(event) {
-        let { lastX, lastY } = this.state
-        /*  event.client - this.state.origin 表示的是移动的距离,
-        *   elX表示的是原来已经有的位移
-        */
-        let deltaX = event.clientX - this.state.originX + lastX
-        let deltaY = event.clientY - this.state.originY + lastY
-
-        const { bounds } = this.props
-        if (bounds) {
-            /**
-            * 如果用户指定一个边界，那么在这里处理
-            */
-            let NewBounds = typeof bounds !== 'string' ? bounds : parseBounds(bounds)
-
-            /**
-             * 移动范围设定，永远移动 n 的倍数
-             * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
-             */
-            const { grid } = this.props
-            if (Array.isArray(grid) && grid.length === 2) {
-                deltaX = Math.round(deltaX / grid[0]) * grid[0]
-                deltaY = Math.round(deltaY / grid[1]) * grid[1]
-            }
-
-            if (this.props.bounds === 'parent') {
-                NewBounds = {
-                    left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
-                    top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
-                    right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft +
-                    int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
-                    bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop +
-                    int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
-                }
-            }
-
-            /**
-             * 保证不超出右边界和底部
-             * keep element right and bot can not cross the bounds
-             */
-            if (isNumber(NewBounds.right)) deltaX = Math.min(deltaX, NewBounds.right)
-            if (isNumber(NewBounds.bottom)) deltaY = Math.min(deltaY, NewBounds.bottom)
-
-            /**
-             * 保证不超出左边和上边
-             * keep element left and top can not cross the bounds
-             */
-            if (isNumber(NewBounds.left)) deltaX = Math.max(deltaX, NewBounds.left)
-            if (isNumber(NewBounds.top)) deltaY = Math.max(deltaY, NewBounds.top)
-        }
-
-
-        /**如果设置了x,y限制 */
-        deltaX = this.props.allowX ? deltaX : 0
-        deltaY = this.props.allowY ? deltaY : 0
-
-
-        this.setState({
-            x: deltaX,
-            y: deltaY
-        })
-    }
-
-    onDragStart(event) {
-        /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
-        doc.body.style.userSelect = 'none'
-
-        if (this.props.hasDraggerHandle) {
-            if (event.target.className !== 'handle') return
-        }
-
-        doc.addEventListener('mousemove', this.move)
-        doc.addEventListener('mouseup', this.onDragEnd)
-
-        if (this.props.bounds === 'parent' &&
-            //为了让 这段代码不会重复执行
-            (typeof this.parent === 'undefined' || this.parent === null)) {
-            /**
-             * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
-             * what we do here is 
-             * making sure that we still can retrieve our parent when user's mouse left this node.
-             */
-            this.parent = event.currentTarget.offsetParent
-            /**
-             * 我们自己
-             * ourself
-             */
-            this.self = event.currentTarget
-        }
-
-        this.setState({
-            originX: event.clientX,
-            originY: event.clientY,
-            lastX: this.state.x,
-            lastY: this.state.y
-        })
-    }
-
-    onDragEnd(event) {
-        /** 取消用户选择限制，用户可以重新选择 */
-        doc.body.style.userSelect = ''
-        this.parent = null
-        this.self = null
-        doc.removeEventListener('mousemove', this.move)
-        doc.removeEventListener('mouseup', this.onDragEnd)
-
-    }
 
-    render() {
-        const { x, y } = this.state
-        const { bounds, style, className, others } = this.props
-
-        /**主要是为了让用户定义自己的className去修改css */
-        let fixedClassName = typeof className === 'undefined' ? '' : className + ' '
-        return (
-            <div className={`${fixedClassName}WrapDragger`}
-                style={{ ...style, touchAction: 'none!important', transform: `translate(${x}px,${y}px)` }}
-                onMouseDown={this.onDragStart.bind(this)}
-                onMouseUp={this.onDragEnd.bind(this)}
-                {...others}
-            >
-                {/**
-             *  React.cloneElement复制了所有的子元素，然后进行渲染，这样用户就可以使用
-             *  <drager>
-             *       something....
-             *  </drager>
-             *
-             *  React.Children.only 只允许子元素有一个根节点
-             */}
-                {React.cloneElement(React.Children.only(this.props.children), {})}
-            </div>
-        )
-    }
-}
-
-
-export default class tmpFather extends React.Component {
+export default class CtmpFather extends React.Component {
     render() {
         return (
             <div
@@ -192,7 +12,7 @@ export default class tmpFather extends React.Component {
                 style={{ display: 'flex', left: 100, height: 300, width: 300, border: '1px solid black', position: 'absolute' }}
                 ref={(node) => this.node = node}
             >
-                <Drager
+                <Dragger
                     bounds='parent'
                     style={{ height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' }}
                     grid={[30, 30]}
@@ -201,16 +21,15 @@ export default class tmpFather extends React.Component {
                         <p>asdasdad</p>
                         <p>asdasdad</p>
                     </div>
-                </Drager>
-                <Drager
+                </Dragger>
+                <Dragger
                     style={{ height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' }}
                     hasDraggerHandle={true}
                 >
                     <div>
                         <p className='handle' >asdasdad</p>
                     </div>
-                </Drager>
-
+                </Dragger>
             </div>
         )
     }

app/src/Dragger.js

@@ -0,0 +1,181 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils'
+
+const doc = document
+
+export default class Dragger extends React.Component {
+    constructor(...props) {
+        super(...props)
+        this.move = this.move.bind(this)
+        this.onDragEnd = this.onDragEnd.bind(this)
+    }
+
+    static propTypes = {
+        bounds: PropTypes.oneOfType([
+            PropTypes.shape({
+                left: PropTypes.number,
+                right: PropTypes.number,
+                top: PropTypes.number,
+                bottom: PropTypes.number
+            }),
+            PropTypes.string
+        ]),
+        grid: PropTypes.arrayOf(PropTypes.number),
+        allowX: PropTypes.bool,
+        allowY: PropTypes.bool,
+        hasDraggerHandle: PropTypes.bool
+    }
+
+    static defaultProps = {
+        allowX: true,
+        allowY: true,
+        hasDraggerHandle: false
+    };
+
+    state = {
+        x: null,
+        y: null,
+        originX: 0,
+        originY: 0,
+        lastX: 0,
+        lastY: 0
+    }
+
+    componentDidMount() {
+    }
+
+    move(event) {
+        let { lastX, lastY } = this.state
+        /*  event.client - this.state.origin 表示的是移动的距离,
+        *   elX表示的是原来已经有的位移
+        */
+        let deltaX = event.clientX - this.state.originX + lastX
+        let deltaY = event.clientY - this.state.originY + lastY
+
+        const { bounds } = this.props
+        if (bounds) {
+            /**
+            * 如果用户指定一个边界，那么在这里处理
+            */
+            let NewBounds = typeof bounds !== 'string' ? bounds : parseBounds(bounds)
+
+            /**
+             * 移动范围设定，永远移动 n 的倍数
+             * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
+             */
+            const { grid } = this.props
+            if (Array.isArray(grid) && grid.length === 2) {
+                deltaX = Math.round(deltaX / grid[0]) * grid[0]
+                deltaY = Math.round(deltaY / grid[1]) * grid[1]
+            }
+
+            if (this.props.bounds === 'parent') {
+                NewBounds = {
+                    left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
+                    top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
+                    right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft +
+                    int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
+                    bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop +
+                    int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
+                }
+            }
+
+            /**
+             * 保证不超出右边界和底部
+             * keep element right and bot can not cross the bounds
+             */
+            if (isNumber(NewBounds.right)) deltaX = Math.min(deltaX, NewBounds.right)
+            if (isNumber(NewBounds.bottom)) deltaY = Math.min(deltaY, NewBounds.bottom)
+
+            /**
+             * 保证不超出左边和上边
+             * keep element left and top can not cross the bounds
+             */
+            if (isNumber(NewBounds.left)) deltaX = Math.max(deltaX, NewBounds.left)
+            if (isNumber(NewBounds.top)) deltaY = Math.max(deltaY, NewBounds.top)
+        }
+
+
+        /**如果设置了x,y限制 */
+        deltaX = this.props.allowX ? deltaX : 0
+        deltaY = this.props.allowY ? deltaY : 0
+
+
+        this.setState({
+            x: deltaX,
+            y: deltaY
+        })
+    }
+
+    onDragStart(event) {
+        /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
+        doc.body.style.userSelect = 'none'
+
+        if (this.props.hasDraggerHandle) {
+            if (event.target.className !== 'handle') return
+        }
+
+        doc.addEventListener('mousemove', this.move)
+        doc.addEventListener('mouseup', this.onDragEnd)
+
+        if (this.props.bounds === 'parent' &&
+            //为了让 这段代码不会重复执行
+            (typeof this.parent === 'undefined' || this.parent === null)) {
+            /**
+             * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
+             * what we do here is 
+             * making sure that we still can retrieve our parent when user's mouse left this node.
+             */
+            this.parent = event.currentTarget.offsetParent
+            /**
+             * 我们自己
+             * ourself
+             */
+            this.self = event.currentTarget
+        }
+
+        this.setState({
+            originX: event.clientX,
+            originY: event.clientY,
+            lastX: this.state.x,
+            lastY: this.state.y
+        })
+    }
+
+    onDragEnd(event) {
+        /** 取消用户选择限制，用户可以重新选择 */
+        doc.body.style.userSelect = ''
+        this.parent = null
+        this.self = null
+        doc.removeEventListener('mousemove', this.move)
+        doc.removeEventListener('mouseup', this.onDragEnd)
+
+    }
+
+    render() {
+        const { x, y } = this.state
+        const { bounds, style, className, others } = this.props
+
+        /**主要是为了让用户定义自己的className去修改css */
+        let fixedClassName = typeof className === 'undefined' ? '' : className + ' '
+        return (
+            <div className={`${fixedClassName}WrapDragger`}
+                style={{ ...style, touchAction: 'none!important', transform: `translate(${x}px,${y}px)` }}
+                onMouseDown={this.onDragStart.bind(this)}
+                onMouseUp={this.onDragEnd.bind(this)}
+                {...others}
+            >
+                {/**
+             *  React.cloneElement复制了所有的子元素，然后进行渲染，这样用户就可以使用
+             *  <drager>
+             *       something....
+             *  </drager>
+             *
+             *  React.Children.only 只允许子元素有一个根节点
+             */}
+                {React.cloneElement(React.Children.only(this.props.children), {})}
+            </div>
+        )
+    }
+}

app/src/index.js

@@ -1,10 +1,9 @@
 'use strict'
-
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
+
 ReactDOM.render(
     <div>
         <App />

build/App.js

@@ -0,0 +1,93 @@
+import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
+import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
+import _inherits from 'babel-runtime/helpers/inherits';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Dragger from './Dragger.js';
+import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils';
+
+var CtmpFather = function (_React$Component) {
+    _inherits(CtmpFather, _React$Component);
+
+    function CtmpFather() {
+        _classCallCheck(this, CtmpFather);
+
+        return _possibleConstructorReturn(this, (CtmpFather.__proto__ || _Object$getPrototypeOf(CtmpFather)).apply(this, arguments));
+    }
+
+    _createClass(CtmpFather, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            return React.createElement(
+                'div',
+                {
+                    className: 'shitWrap',
+                    style: { display: 'flex', left: 100, height: 300, width: 300, border: '1px solid black', position: 'absolute' },
+                    ref: function ref(node) {
+                        return _this2.node = node;
+                    }
+                },
+                React.createElement(
+                    Dragger,
+                    {
+                        bounds: 'parent',
+                        style: { height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' },
+                        grid: [30, 30]
+                    },
+                    React.createElement(
+                        'div',
+                        null,
+                        React.createElement(
+                            'p',
+                            null,
+                            'asdasdad'
+                        ),
+                        React.createElement(
+                            'p',
+                            null,
+                            'asdasdad'
+                        )
+                    )
+                ),
+                React.createElement(
+                    Dragger,
+                    {
+                        style: { height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' },
+                        hasDraggerHandle: true
+                    },
+                    React.createElement(
+                        'div',
+                        null,
+                        React.createElement(
+                            'p',
+                            { className: 'handle' },
+                            'asdasdad'
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+
+    return CtmpFather;
+}(React.Component);
+
+var _default = CtmpFather;
+export default _default;
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+
+    __REACT_HOT_LOADER__.register(CtmpFather, 'CtmpFather', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(_default, 'default', 'app/src/App.js');
+}();
+
+;

build/Dragger.js

@@ -0,0 +1,218 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
+import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
+import _inherits from 'babel-runtime/helpers/inherits';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils';
+
+var doc = document;
+
+var Dragger = function (_React$Component) {
+    _inherits(Dragger, _React$Component);
+
+    function Dragger() {
+        var _ref;
+
+        _classCallCheck(this, Dragger);
+
+        for (var _len = arguments.length, props = Array(_len), _key = 0; _key < _len; _key++) {
+            props[_key] = arguments[_key];
+        }
+
+        var _this = _possibleConstructorReturn(this, (_ref = Dragger.__proto__ || _Object$getPrototypeOf(Dragger)).call.apply(_ref, [this].concat(props)));
+
+        _this.state = {
+            x: null,
+            y: null,
+            originX: 0,
+            originY: 0,
+            lastX: 0,
+            lastY: 0
+        };
+
+        _this.move = _this.move.bind(_this);
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        return _this;
+    }
+
+    _createClass(Dragger, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {}
+    }, {
+        key: 'move',
+        value: function move(event) {
+            var _state = this.state,
+                lastX = _state.lastX,
+                lastY = _state.lastY;
+            /*  event.client - this.state.origin 表示的是移动的距离,
+            *   elX表示的是原来已经有的位移
+            */
+
+            var deltaX = event.clientX - this.state.originX + lastX;
+            var deltaY = event.clientY - this.state.originY + lastY;
+
+            var bounds = this.props.bounds;
+
+            if (bounds) {
+                /**
+                * 如果用户指定一个边界，那么在这里处理
+                */
+                var NewBounds = typeof bounds !== 'string' ? bounds : parseBounds(bounds);
+
+                /**
+                 * 移动范围设定，永远移动 n 的倍数
+                 * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
+                 */
+                var grid = this.props.grid;
+
+                if (Array.isArray(grid) && grid.length === 2) {
+                    deltaX = Math.round(deltaX / grid[0]) * grid[0];
+                    deltaY = Math.round(deltaY / grid[1]) * grid[1];
+                }
+
+                if (this.props.bounds === 'parent') {
+                    NewBounds = {
+                        left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
+                        top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
+                        right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft + int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
+                        bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop + int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
+                    };
+                }
+
+                /**
+                 * 保证不超出右边界和底部
+                 * keep element right and bot can not cross the bounds
+                 */
+                if (isNumber(NewBounds.right)) deltaX = Math.min(deltaX, NewBounds.right);
+                if (isNumber(NewBounds.bottom)) deltaY = Math.min(deltaY, NewBounds.bottom);
+
+                /**
+                 * 保证不超出左边和上边
+                 * keep element left and top can not cross the bounds
+                 */
+                if (isNumber(NewBounds.left)) deltaX = Math.max(deltaX, NewBounds.left);
+                if (isNumber(NewBounds.top)) deltaY = Math.max(deltaY, NewBounds.top);
+            }
+
+            /**如果设置了x,y限制 */
+            deltaX = this.props.allowX ? deltaX : 0;
+            deltaY = this.props.allowY ? deltaY : 0;
+
+            this.setState({
+                x: deltaX,
+                y: deltaY
+            });
+        }
+    }, {
+        key: 'onDragStart',
+        value: function onDragStart(event) {
+            /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
+            doc.body.style.userSelect = 'none';
+
+            if (this.props.hasDraggerHandle) {
+                if (event.target.className !== 'handle') return;
+            }
+
+            doc.addEventListener('mousemove', this.move);
+            doc.addEventListener('mouseup', this.onDragEnd);
+
+            if (this.props.bounds === 'parent' && (
+            //为了让 这段代码不会重复执行
+            typeof this.parent === 'undefined' || this.parent === null)) {
+                /**
+                 * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
+                 * what we do here is 
+                 * making sure that we still can retrieve our parent when user's mouse left this node.
+                 */
+                this.parent = event.currentTarget.offsetParent;
+                /**
+                 * 我们自己
+                 * ourself
+                 */
+                this.self = event.currentTarget;
+            }
+
+            this.setState({
+                originX: event.clientX,
+                originY: event.clientY,
+                lastX: this.state.x,
+                lastY: this.state.y
+            });
+        }
+    }, {
+        key: 'onDragEnd',
+        value: function onDragEnd(event) {
+            /** 取消用户选择限制，用户可以重新选择 */
+            doc.body.style.userSelect = '';
+            this.parent = null;
+            this.self = null;
+            doc.removeEventListener('mousemove', this.move);
+            doc.removeEventListener('mouseup', this.onDragEnd);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _state2 = this.state,
+                x = _state2.x,
+                y = _state2.y;
+            var _props = this.props,
+                bounds = _props.bounds,
+                style = _props.style,
+                className = _props.className,
+                others = _props.others;
+
+            /**主要是为了让用户定义自己的className去修改css */
+
+            var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
+            return React.createElement(
+                'div',
+                _extends({ className: fixedClassName + 'WrapDragger',
+                    style: _extends({}, style, { touchAction: 'none!important', transform: 'translate(' + x + 'px,' + y + 'px)' }),
+                    onMouseDown: this.onDragStart.bind(this),
+                    onMouseUp: this.onDragEnd.bind(this)
+                }, others),
+                React.cloneElement(React.Children.only(this.props.children), {})
+            );
+        }
+    }]);
+
+    return Dragger;
+}(React.Component);
+
+Dragger.propTypes = {
+    bounds: PropTypes.oneOfType([PropTypes.shape({
+        left: PropTypes.number,
+        right: PropTypes.number,
+        top: PropTypes.number,
+        bottom: PropTypes.number
+    }), PropTypes.string]),
+    grid: PropTypes.arrayOf(PropTypes.number),
+    allowX: PropTypes.bool,
+    allowY: PropTypes.bool,
+    hasDraggerHandle: PropTypes.bool
+};
+Dragger.defaultProps = {
+    allowX: true,
+    allowY: true,
+    hasDraggerHandle: false
+};
+var _default = Dragger;
+export default _default;
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+
+    __REACT_HOT_LOADER__.register(doc, 'doc', 'app/src/Dragger.js');
+
+    __REACT_HOT_LOADER__.register(Dragger, 'Dragger', 'app/src/Dragger.js');
+
+    __REACT_HOT_LOADER__.register(_default, 'default', 'app/src/Dragger.js');
+}();
+
+;

build/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(React.createElement(
+    'div',
+    null,
+    React.createElement(App, null)
+), document.getElementById('root'));
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+}();
+
+;

build/style.css

@@ -0,0 +1,11 @@
+/* .shit:hover{
+    width: 100px;
+    height: 100px;
+} */
+
+.WrapDragger{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}

build/utils.js

@@ -0,0 +1,72 @@
+export var int = function int(number) {
+    if (number === '') {
+        return 0;
+    }
+    return parseInt(number, 10);
+};
+export var innerWidth = function innerWidth(node) {
+    var width = node.clientWidth;
+    var computedStyle = node.style;
+    width -= int(computedStyle.paddingLeft);
+    width -= int(computedStyle.paddingRight);
+    return width;
+};
+
+export var outerWidth = function outerWidth(node) {
+    var width = node.clientWidth;
+    var computedStyle = node.style;
+    width += int(computedStyle.borderLeftWidth);
+    width += int(computedStyle.borderRightWidth);
+    return width;
+};
+
+export var innerHeight = function innerHeight(node) {
+    var height = node.clientHeight;
+    var computedStyle = node.style;
+    height -= int(computedStyle.paddingTop);
+    height -= int(computedStyle.paddingBottom);
+    return height;
+};
+
+export var outerHeight = function outerHeight(node) {
+    var height = node.clientHeight;
+    var computedStyle = node.style;
+    height += int(computedStyle.borderTopWidth);
+    height += int(computedStyle.borderBottomWidth);
+    return height;
+};
+export var parseBounds = function parseBounds(bounds) {
+    return {
+        left: bounds.left,
+        top: bounds.top,
+        right: bounds.right,
+        bottom: bounds.bottom
+    };
+};
+
+export var isNumber = function isNumber(things) {
+    return typeof things === 'number' ? true : false;
+};
+;
+
+var _temp = function () {
+    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
+        return;
+    }
+
+    __REACT_HOT_LOADER__.register(int, 'int', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(innerWidth, 'innerWidth', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(outerWidth, 'outerWidth', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(innerHeight, 'innerHeight', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(outerHeight, 'outerHeight', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(parseBounds, 'parseBounds', 'app/src/utils.js');
+
+    __REACT_HOT_LOADER__.register(isNumber, 'isNumber', 'app/src/utils.js');
+}();
+
+;

index.js

@@ -1,4 +1,4 @@
-var Draggable = require('./build/react-dragger-layout').default;
+var Draggable = require('./build/Dragger').default;
 
 // Previous versions of this lib exported <Draggable> as the root export. As to not break
 // them, or TypeScript, we export *both* as the root and as 'default'.

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-dragger-layout",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "webpack-dev-server --devtool eval-source-map --progress --host 127.0.0.1 --colors --hot --content-base ./build --history-api-fallback",
-    "build": "NODE_ENV=production webpack -p --config webpack.pro.config.js ",
+    "build": "./node_modules/.bin/babel --out-dir ./build ./app/src/",
     "dev": "webpack-dev-server --devtool eval-source-map --progress --host 127.0.0.1 --colors --content-base ./build --history-api-fallback"
   },
   "author": "Fangzheng",

webpack.config.js

@@ -11,8 +11,7 @@ module.exports = {
     output: {
         path: resolve(__dirname, 'build'),//打包后的文件存放的地方
         filename: "bundle.js",//打包后输出文件的文件名
-        publicPath: "/",
-        libraryTarget: 'commonjs2'
+        publicPath: "/"
     },
     devServer: {
         contentBase: resolve(__dirname, 'build'),
@@ -35,9 +34,6 @@ module.exports = {
 
         ]
     },
-    externals: {
-        'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
-      },
     plugins: [
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NamedModulesPlugin(),

webpack.pro.config.js

@@ -10,13 +10,29 @@ module.exports = {
     output: {
         path: resolve(__dirname, 'build'),//打包后的文件存放的地方
         filename: "react-dragger-layout.js",//打包后输出文件的文件名
-        publicPath: "/"
+        publicPath: "/",
+        libraryTarget: 'umd'
     },
     devServer: {
         contentBase: resolve(__dirname, 'build'),
         hot: true,
         publicPath: '/',
     },
+    externals: {
+        'react': {
+          'commonjs': 'react',
+          'commonjs2': 'react',
+          'amd': 'react',
+          // React dep should be available as window.React, not window.react
+          'root': 'React'
+        },
+        'react-dom': {
+          'commonjs': 'react-dom',
+          'commonjs2': 'react-dom',
+          'amd': 'react-dom',
+          'root': 'ReactDOM'
+        }
+      },
     module: {
         rules: [
             {