如何在Cordova中加载node_modules?(Web浏览器模块，而不是特定于node.js的) [英] How do I load node_modules in Cordova? (web browser modules, not node.js specific)

问题描述

我已经使用创建了一个新的Cordova应用

  cordova创建MyApp 

我想使用几个Web库(不依赖于node.js)，所以我用npm安装了它们.例如

  npm install onsenui vue-onsenui --save-dev 

目录结构如下:

  config.xml钩子/node_modules/package.json平台/插件/分辨率/万维网/ 

www中的index.html文件具有包含库的脚本标签

 < script type ="text/javascript" src ="cordova.js"></script>< script type ="text/javascript" src ="vue.js"></script>< script type ="text/javascript" src ="onsenui.js"></script>< script type ="text/javascript" src ="vue-onsenui.js"></script> 

在运行 cordova run browser 命令时，Web服务器可以正常运行并按应有的方式显示页面，包括加载cordova.js文件，但对于其他库，它会返回404.

>

是否可以在Cordova中使用这些节点模块而不将它们复制到www目录中?

解决方案

TLDR和简单

使用npm软件包:

在 cordova build 时也会触发该钩子，因为 cordova build 等于 cordova prepare&&科尔多瓦编译.

I have created a new Cordova app using

cordova create MyApp

I wanted to use a couple of web libraries (no dependency on node.js) and so I installed them with npm. E.g.

npm install onsenui vue-onsenui --save-dev

The directory structure looks like:

config.xml
hooks/
node_modules/
package.json
platforms/
plugins/
res/
www/

The index.html file in www has script tags to include the libraries

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="onsenui.js"></script>
<script type="text/javascript" src="vue-onsenui.js"></script>

When running the cordova run browser command, the web server runs fine and displays the page as it should, including loading the cordova.js file, but it returns 404 for the other libraries.

Is there a way to use these node modules in Cordova without copying them into the www directory?

解决方案

TLDR and simple

Use the npm package: cordova-import-npm

Long question and DIY

You can use a hook before cordova prepare, that is, when the files are assembled for compiling.

1. Edit your config.xml and add this line (not inside any platform but in the root, i.e. inside <widget):

<hook src="hooks/importNpmPackages.js" type="before_prepare"/>

2. Create the file hooks/importNpmPackages.js with this content

const fse = require('fs-extra')
const path = require('path')
const twoSpaces = '  ' // for log indentation
var projectRoot

module.exports = function (context) {
  console.log(`${context.hook} : ${path.relative(context.opts.projectRoot, context.scriptLocation)}`)

  projectRoot = context.opts.projectRoot
  console.log(twoSpaces + 'Project root directory: ' + projectRoot)

  copyFile('jquery', path.join('dist', 'jquery.min.js'), path.join('js', 'res', 'jquery.min.js'))

  copyFile('bootstrap', path.join('dist', 'js', 'bootstrap.min.js'), path.join('js', 'res', 'bootstrap.min.js'))
  copyFile('bootstrap', path.join('dist', 'css', 'bootstrap.min.css'), path.join('css', 'res', 'bootstrap.min.css'))
}

function copyFile (npmPackage, // oficial name of the npm package from which the file is to be copied from
  fileRelativePath, // file path with respect to the main directory of the npm package (node_modules/<package>/)
  destFilePath) { // file's path to where it is copied, relative to the project www/ directory
  
  const packageDirFullpath = path.dirname(require.resolve(path.join(npmPackage, 'package.json')))
  const fileOriginFullPath = path.join(packageDirFullpath, fileRelativePath)
  const fileDestFullPath = path.join(projectRoot, 'www', destFilePath)

  fse.copySync(fileOriginFullPath, fileDestFullPath)

  const consoleMsg = npmPackage + ': ' +
    path.relative(projectRoot, fileOriginFullPath) + ' -> ' +
    path.relative(projectRoot, fileDestFullPath)
  console.log(twoSpaces + consoleMsg)
}

As you can see in this file I am copying jquery and bootsrap files using a function copyFile with this syntax:

copyFile(
  '<npmPackageName>',
  '<path/of/originFile/relative/to/packageDir>',
  '<path/to/destFile/relative/to/wwwDir>'
)

I use this in all my cordova projects and it works like a charm. That's how I see it

The hook is also triggered upon cordova build because cordova build equals to cordova prepare && cordova compile.

这篇关于如何在Cordova中加载node_modules?(Web浏览器模块，而不是特定于node.js的)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！