如何在Cordova插件中引入npm依赖

我来帮你搞定这个模块找不到的问题！你遇到的是Cordova插件开发里很常见的npm依赖打包坑——Cordova默认不会自动把插件的npm依赖一起打包到目标应用中，所以安装后运行时自然找不到@aerogearservices/core模块。下面是我亲测有效的解决步骤，咱们一步步来：

1. 用Browserify正确打包依赖到单文件 #

你已经尝试了Browserify，但可能没做到完整打包或者配置不对。按以下步骤来：

• 首先在你的插件根目录安装依赖（确保已经保存到package.json）：

  npm install @aerogearservices/core --save
  

• 执行Browserify命令，把你的插件主JS文件和所有依赖打包成一个独立的bundle文件：

  # 假设你的插件入口是src/index.js，输出到dist目录
  browserify src/index.js --standalone CoreCordova -o dist/core-cordova.bundle.js
  

  这里的--standalone参数很重要，它会把打包后的模块暴露成全局变量，方便Cordova在应用中调用。

2. 修正plugin.xml的JS模块引用 #

Cordova是通过plugin.xml来识别要复制到应用的文件的，你需要把原来引用未打包JS的配置，改成指向打包后的bundle文件：

<!-- 替换原来的js-module配置 -->
<js-module src="dist/core-cordova.bundle.js" name="core-cordova">
    <clobbers target="CoreCordova" />
</js-module>

3. 确保发布到npm时包含打包文件 #

打开插件的package.json，在files字段里加入dist目录，这样发布到npm时，打包后的bundle文件会被包含进去，别人安装插件时才能拿到：

{
  "files": [
    "dist",
    "plugin.xml",
    "package.json",
    // 其他需要包含的文件，比如src目录（如果需要的话）
  ]
}

4. 本地测试验证 #

在发布到npm之前，先本地安装插件测试是否正常：

# 在你的Cordova应用目录执行
cordova plugin add ./path/to/your/core-cordova-plugin-folder

运行应用后检查控制台，如果没有module not found的错误，就说明配置正确了，之后就可以正常发布到npm啦。

可选：用Rollup/Webpack替代Browserify #

如果你更喜欢用其他打包工具，思路是一样的：

• 配置Rollup/Webpack把插件代码和@aerogearservices/core打包成单文件
• 修改plugin.xml引用打包后的文件
• 确保打包目录在package.json的files中

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