Question

我正在使用Phonegap和React构建此应用程序。当我在我的React项目的HTML模板页脚中包含cordova.js并在React组件中使用Camera插件并运行build以便将构建项目复制到Phonegap的www文件夹时，webpack出现一个错误，即Camera is无法使用。当然，当我将构建文件夹复制到Phonegap的www文件夹并运行Phonegap服务器后，当phonegap服务器将运行时，Cordova的Camera插件将在稍后的运行时可用。

我的问题是如何将Cordova及其照相机插件包含到React中，以便Webpack能够找到它，但不会将依赖项添加到已编译的JavaScript文件中，因为Cordova库及其所有插件都将在以后与Phonegap一起运行时提供React / webpack的内置文件。

这是我的代码和文件夹结构-

HTML-

<body>

    <div id="root"></div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/plugins.js"></script>
    <script type="text/javascript" src="scripts/custom.js"></script>

</body>

反应成分-

    import React, { Component } from 'react';
    import axios from 'axios';

    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import * as allActions from '../../actions/basket';
    import restaurant_image from '../../assets/images/pictures/2t.jpg';

    class Basket extends Component {

      constructor(props) {
          super(props);
          this.deviceReady = this.deviceReady.bind(this);
          this.state = {
            restaurants_info: [],
            showInput: false,
            posts_awaiting: 0,
            button_disabled: true
          }
      }


      deviceReady () {
        window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
      }

      onSuccess(imageURI) {
        var image = document.getElementById('urlImage');
        image.src = imageURI;

        image.style.display = 'block';

        console.log(imageURI);
      }

      onFail(message) {
        console.log(message);
      }

      componentDidMount() {
        document.addEventListener('deviceready', this.deviceReady);
      }
      render() {

      const imgStyle = {
        maxWidth: "100%"
      }

        return (
                <button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
                <img alt="bello" id="urlImage"/>
                </div>
            </div>
        );
      }

    }

    function mapStateToProps(state, prop) {
      return {
        posts_added: state.posts_added,
        posts_basketed: state.posts_basketed,
        awaiting_added: state.awaiting_added
      }
    }

    function mapDispatchToProp(dispatch) {
      return {
        action: bindActionCreators(allActions, dispatch)
      }
    }

    export default connect(mapStateToProps, mapDispatchToProp)(Basket);

这是应用程序结构- 我在React上运行build命令，并将构建文件复制到Phonegap的www文件夹-

编译错误说cordova不可用？

0 个答案: