使用Mobiscroll与webpack和babel

时间:2016-07-18 20:45:33

标签: javascript jquery ecmascript-6 webpack mobiscroll

我正在使用github中的Mobiscroll,但我也尝试将其生成器与react一起使用。

github版本的问题在于它是多个文件:

bower_components/mobiscroll/js/mobiscroll.android-holo-light.js
bower_components/mobiscroll/js/mobiscroll.core.js
bower_components/mobiscroll/js/mobiscroll.dom.js
bower_components/mobiscroll/js/mobiscroll.frame.android-holo.js
bower_components/mobiscroll/js/mobiscroll.frame.ios.js
bower_components/mobiscroll/js/mobiscroll.frame.jqm.js
bower_components/mobiscroll/js/mobiscroll.frame.js
bower_components/mobiscroll/js/mobiscroll.frame.wp.js
bower_components/mobiscroll/js/mobiscroll.mobiscroll-dark.js
bower_components/mobiscroll/js/mobiscroll.scroller.js
bower_components/mobiscroll/js/mobiscroll.scrollview.js
bower_components/mobiscroll/js/mobiscroll.wp-light.js

那么,当我在react documention明确表示:

时,我是如何从导入的角度来解决这个问题的呢?
var CalendarDemo = React.createClass({
    render: function() {
        return (
            <div>
                <MobiscrollCalendar 
                    ref="calendar" 
                    theme="mobiscroll" 
                    display="bottom"
                    placeholder="Please Select..."
                />
            </div>
        );
    }    
});

ReactDOM.render(
    <CalendarDemo />,
    document.getElementById('content')
);

我无法找到明确的方法:MobiscrollCalendar中的这些文件。

所以我认为我可以安全地假设github版本不适用于webpack。

反应&amp; weback安全版 - 所以我被引导相信:)

我确实尝试了专门用于反应的捆绑版本,并且我被告知支持webpack。

Js档案

import {MobiscrollCalendar} from '../../lib/mobiscroll';

class Home extends React.Component {
    render = function (){
        return (
            <app-content>
                <Header />
                <div className={loggedOut.home}>
                    <MobiscrollCalendar
                        ref="calendar"
                        theme="mobiscroll"
                        display="bottom"
                        placeholder="Please Select..."
                    />
                </div>
            </app-content>
        )
    }
}

然而,使用此功能会给我以下错误

 Uncaught ReferenceError: React is not defined

所以为了解决这个问题,这对我使用webpack :)是将wreact和mobiscroll添加到html:

<script src="/js/react.min.js"></script>
<script src="/js/mobiscroll.js"></script>
<script src="/js/react-dom.min.js"></script>

然后会导致以下错误

warning.js:44 Warning: getInitialState was defined on t, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
warning.js:44 Warning: Unknown DOM property readonly. Did you mean readOnly?

我相信我现在会放弃。 :(我不确定其他人可以提供帮助。

0 个答案:

没有答案