如何在React JS页面中使用Cordova插件？解决依赖找不到问题

我完全懂你遇到的困扰——Cordova插件确实不能像普通npm包那样用import或require直接导入，而且它们只有在Cordova专属运行环境（真机、模拟器或是cordova run browser启动的环境）里才会存在，npm start启动的浏览器开发服务器压根没有Cordova环境，这就是你报错的核心原因。下面是一步步的可行解决方案：

1. 先确保插件已正确安装 #

首先确认你已经通过Cordova命令完成了插件安装：

cordova plugin add cordova-plugin-device

注意这个命令是把插件添加到Cordova项目结构中，而非npm依赖，所以你不需要在package.json里添加它的依赖项。

2. 正确访问Cordova插件（避免导入报错） #

Cordova插件初始化完成后，会把对应的对象挂载到全局window对象上。对于cordova-plugin-device来说，就是window.device。你不需要用require或import引入，直接访问这个全局对象就可以了。

3. 必须等待Cordova的deviceready事件 #

Cordova只有在deviceready事件触发后，才能安全调用任何插件API。所以在你的React组件里，得先监听这个事件，确保插件可用后再去获取设备UUID。

适配你Login组件的类组件示例 #

import React, { Component } from 'react';

class Login extends Component {
  state = {
    phone: '',
    password: '',
    deviceID: 'test' // 开发环境默认测试值，避免报错
  };

  componentDidMount() {
    // 检查是否处于Cordova环境
    if (window.cordova) {
      document.addEventListener('deviceready', this.onDeviceReady, false);
    }
  }

  onDeviceReady = () => {
    // 此时可以安全调用Cordova插件API
    this.setState({
      deviceID: window.device.uuid
    });
  };

  handleSubmit = () => {
    const { phone, password, deviceID } = this.state;
    let params = {
      phonenumber: phone,
      password: password,
      deviceID: deviceID
    };
    // 后续的表单提交逻辑...
  };

  render() {
    // 你的表单渲染代码
    return (
      <div>
        <input 
          type="text" 
          value={this.state.phone} 
          onChange={(e) => this.setState({phone: e.target.value})}
          placeholder="手机号"
        />
        <input 
          type="password" 
          value={this.state.password} 
          onChange={(e) => this.setState({password: e.target.value})}
          placeholder="密码"
        />
        <button onClick={this.handleSubmit}>登录</button>
      </div>
    );
  }
}

export default Login;

4. 开发环境与Cordova环境的区分处理 #

• 运行npm start时，因为没有Cordova环境，window.cordova不存在，组件会使用默认的test作为deviceID，不会触发报错。
• 当你构建并运行Cordova项目时（比如执行npm run build && cordova run android），deviceready事件会正常触发，此时就能获取到真实的设备UUID。

为什么你的原有代码会报错？ #

你尝试用require("cordova-plugin-device")导入插件，但cordova-plugin-device并不是一个标准npm包，它是Cordova的原生插件，不会出现在你的node_modules目录里，所以Node.js的模块解析器找不到它，才会抛出Module not found错误。

内容的提问来源于stack exchange，提问作者Lateefah