Webpack无法解析cordova-plugin-ble-central模块问题求助

我用Ionic Capacitor构建移动应用，尝试引入cordova-plugin-ble-central模块，已按Capacitor安装说明完成模块安装和源码同步，但Webpack打包JS文件时出现错误：Module not found: Error: Can't resolve 'cordova-plugin-ble-central' in '我的项目路径'

已尝试的排查步骤 #

• 确认模块存在于node_modules文件夹中
• 删除node_modules文件夹（rm -r node_modules）
• 删除package-lock.json文件
• 清除npm缓存（npm cache clean --force）
• 重新安装所有node模块
• 更换esbuild打包工具，仍出现相同错误

相关配置文件及错误信息 #

package.json #

{
  "name": "capacitor-app",
  "version": "1.0.0",
  "description": "An Amazing Capacitor App",
  "main": "index.js",
  "keywords": [
    "capacitor",
    "mobile"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@awesome-cordova-plugins/core": "^6.4.0",
    "@capacitor/camera": "latest",
    "@capacitor/core": "latest",
    "@capacitor/device": "^5.0.6",
    "@capacitor/splash-screen": "latest",
    "cordova-plugin-ble-central": "^1.7.1",
    "matchdep": "^2.0.0",
    "uglify": "^0.1.5",
    "uniq": "^1.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.22.20",
    "@capacitor/cli": "latest",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "babelify": "^10.0.0",
    "esbuild": "0.19.4",
    "grunt": "^1.6.1",
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0",
    "vinyl-source-stream": "^2.0.0",
    "webpack-cli": "^5.1.4"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js #

const path = require('path');
module.exports = {
  mode: "production",
  entry: "./src",
  output: {
    path: path.resolve(__dirname, "www/js/"),
    filename: "main.js"
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
    modules: ['src', 'node_modules'] // Assuming that your files are inside the src dir
}
};

待打包源码（简化版） #

import '@capacitor/core';
import {
  Device
} from '@capacitor/device';
import {ble} from 'cordova-plugin-ble-central';

window.onload = start;

async function getDeviceInfo() {
    let info = await Device.getInfo();
    return info;
  };

function start() {
  getDeviceInfo().then(info => {
    document.body.innerHTML = JSON.stringify(info, null, 4);
  });
}

错误日志 #

Module not found: Error: Can't resolve 'cordova-plugin-ble-central' in 'C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src'
resolve 'cordova-plugin-ble-central' in 'C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src'
  Parsed request is a module
  using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\src doesn't exist or is not a directory
      C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src
        single file module
          using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\package.json (relative path: ./src/cordova-plugin-ble-central)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.json doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.css doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central.scss doesn't exist
        C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\src\cordova-plugin-ble-central doesn't exist
      looking for modules in C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules
        single file module
          using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\package.json (relative path: ./node_modules/cordova-plugin-ble-central)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.json doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.css doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.scss doesn't exist
        existing directory C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central
          using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\package.json (relative path: .)
            using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\package.json (relative path: ./node_modules/cordova-plugin-ble-central)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central is not a file
              .js
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.jsx doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.ts doesn't exist
              .tsx
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.tsx doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.json doesn't exist
              .css
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.css doesn't exist
              .scss
                Field 'browser' doesn't contain a valid alias configuration
                C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central.scss doesn't exist
              as directory
                existing directory C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central
                  using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\package.json (relative path: .)
                    using path: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index
                      using description file: C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.js doesn't exist
                        .jsx
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.jsx doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.ts doesn't exist
                        .tsx
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.tsx doesn't exist
                        .json
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.json doesn't exist
                        .css
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.css doesn't exist
                        .scss
                          Field 'browser' doesn't contain a valid alias configuration
                          C:\Users\kc\app-dev\mob_app_ble_l2cap_test\my-app\node_modules\cordova-plugin-ble-central\index.scss doesn't exist
      C:\Users\kc\app-dev\mob_app_ble_l2cap_test\src doesn't exist or is not a directory
      C:\Users\kc\app-dev\mob_app_ble_l2cap_test\node_modules doesn't exist or is not a directory
      C:\Users\kc\app-dev\src doesn't exist or is not a directory
      C:\Users\kc\app-dev\node_modules doesn't exist or is not a directory
      C:\Users\kc\src doesn't exist or is not a directory
      C:\Users\kc\node_modules doesn't exist or is not a directory
      C:\Users\src doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\src doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory

webpack 5.88.2 compiled with 1 error in 346 ms

解决方案 #

1. 使用@awesome-cordova-plugins/ble-central封装库 #

cordova-plugin-ble-central本身未提供ES模块规范的入口，直接import会导致打包工具无法解析。你已安装@awesome-cordova-plugins/core，可以安装对应的BLE封装库：

npm install @awesome-cordova-plugins/ble-central

修改源码中的导入语句：

import { BLE } from '@awesome-cordova-plugins/ble-central';

该封装库会正确处理Cordova插件的加载逻辑，适配Capacitor环境。

2. 配置Webpack别名（备选方案） #

若不想使用封装库，可在webpack.config.js中添加别名，直接指向插件的JS文件：

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
  modules: ['src', 'node_modules'],
  alias: {
    'cordova-plugin-ble-central': path.resolve(__dirname, 'node_modules/cordova-plugin-ble-central/www/ble.js')
  }
}

同时修改源码导入方式（插件挂载在window对象上，无需解构）：

import 'cordova-plugin-ble-central';
// 使用时直接调用window.ble
window.ble.scan([], 5, (device) => {
  // 处理扫描结果
}, (error) => {
  // 处理错误
});

3. 重新同步Capacitor插件 #

执行以下命令确保插件正确同步到原生项目：

npx cap sync

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