时间戳

首页 > 解决方案 > 使用 requirejs 在 Aurelia v1 应用程序中捆绑 pouchDB js 库

npm - 使用 requirejs 在 Aurelia v1 应用程序中捆绑 pouchDB js 库

问题描述

我在使用内置的 requirejs 捆绑器/模块加载器在 Aurelia v1 应用程序中捆绑 pouchDB js 库时遇到错误。

我在一个最小的 Aurelia 应用程序中隔离了这个问题：这些是重现错误的步骤：

  1. 使用 aurelia-cli v2.0.3 创建一个最小的 aurelia v1 应用程序。
npm --version
6.14.15

sudo npm install --global aurelia-cli 

au new
✔ Please name this new project: › test
✔ Would you like to use the default setup or customize your choices? › Custom Project
✔ App or Plugin? › App
✔ Which bundler would you like to use? › CLI's built-in bundler with an AMD module loader
✔ Which AMD module loader would you like to use? › RequireJS
✔ What platform are you targeting? › Web
✔ What transpiler would you like to use? › Babel
✔ How would you like to setup your HTML template? › Minified with htmlmin
✔ What css preprocessor would you like to use? › Sass
✔ Do you want to add PostCSS processing › Yes
✔ Which unit test runner would you like to use? › None
✔ Would you like to configure e2e integration testing? › None
✔ What is your default code editor? › None
✔ Which features do you want to scaffold into your project? › Minimum
✔ Would you like to add a Dockerfile? › No
[makes] Project test has been created.
  1. 进入项目目录，启动aurelia bundler
cd test
au run --env dev --port 9000 --watch

最小的 aurelia 应用程序成功显示在 localhost:9000

  1. 安装 pouchDB 的浏览器优化预设
npm install pouchdb-browser
  1. 在 src/app.js 文件中导入并实例化 PounchDB 类
import PouchDB from "pouchdb-browser";

export class App {

  message = 'Hello World!';

  constructor() {
    this.db = new PouchDB("test");
  }

}

一旦在项目中导入 pouchDB 类，Aurelia 捆绑器就会启动并重新捆绑所有添加的依赖项，而不会引发错误

au run --env dev --port 9000 --watch
Local aurelia-cli v2.0.3
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3      aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.2.1      aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.1      aurelia-pal-browser
INFO [Bundle] Manually adding package: 1.0.0      aurelia-testing
INFO [Bundle] Manually adding package: 2.0.16     text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 1.0.3      aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.1      aurelia-framework
INFO [Bundler] Auto tracing package: 1.4.0      aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.2      aurelia-loader
INFO [Bundler] Auto tracing package: 1.1.1      aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.7      aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.2      aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.4      aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.5.3      aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.1     aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0      aurelia-templating-router
INFO [Bundler] Auto tracing package: 7.2.2      pouchdb-browser
INFO [Bundler] Auto tracing package: 0.0.1      argsarray
INFO [Bundler] Auto tracing package: 2.5.4      aurelia-binding
INFO [Bundler] Auto tracing package: 1.5.2      aurelia-dependency-injection
INFO [Bundler] Auto tracing package: 1.2.1      aurelia-history
INFO [Bundler] Auto tracing package: 1.5.2      aurelia-logging
INFO [Bundler] Auto tracing package: 1.1.7      aurelia-path
INFO [Bundler] Auto tracing package: 1.7.1      aurelia-router
INFO [Bundler] Auto tracing package: 1.3.3      aurelia-task-queue
INFO [Bundler] Auto tracing package: 1.10.4     aurelia-templating
INFO [Bundler] Auto tracing package: 3.3.0      events
INFO [Bundler] Auto tracing package: 3.3.0      immediate
INFO [Bundler] Auto tracing package: 2.0.4      inherits
INFO [Bundler] Auto tracing package: 3.0.1      spark-md5
INFO [Bundler] Auto tracing package: 8.1.0      uuid
INFO [Bundler] Auto tracing package: 1.0.3      vuvuzela
INFO [Bundler] Auto tracing package: 1.3.2      aurelia-route-recognizer
INFO [Bundler] Auto stubbing module: crypto
INFO [Bundler] Auto tracing package: 1.0.1      browserify-cipher
INFO [Bundler] Auto tracing package: 4.2.1      browserify-sign
INFO [Bundler] Auto tracing package: 4.0.4      create-ecdh
INFO [Bundler] Auto tracing package: 1.2.0      create-hash
INFO [Bundler] Auto tracing package: 1.1.7      create-hmac
INFO [Bundler] Auto tracing package: 5.0.3      diffie-hellman
INFO [Bundler] Auto tracing package: 3.1.2      pbkdf2
INFO [Bundler] Auto tracing package: 4.0.3      public-encrypt
INFO [Bundler] Auto tracing package: 2.1.0      randombytes
INFO [Bundler] Auto tracing package: 1.0.4      randomfill
INFO [Bundler] Auto tracing package: 5.2.0      bn.js
INFO [Bundler] Auto tracing package: 1.2.0      browserify-aes
INFO [Bundler] Auto tracing package: 1.0.2      browserify-des
INFO [Bundler] Auto tracing package: 1.0.4      cipher-base
INFO [Bundler] Auto tracing package: 6.5.4      elliptic
INFO [Bundler] Auto tracing package: 1.0.3      evp_bytestokey
INFO [Bundler] Auto tracing package: 1.3.5      md5.js
INFO [Bundler] Auto tracing package: 3.6.0      readable-stream
INFO [Bundler] Auto tracing package: 2.0.2      ripemd160
INFO [Bundler] Auto tracing package: 5.1.2      safe-buffer
INFO [Bundler] Auto tracing package: 2.4.11     sha.js
INFO [Bundler] Auto tracing package: 1.1.0      brorand
INFO [Bundler] Auto tracing package: 4.1.0      browserify-rsa
INFO [Bundler] Auto tracing package: 5.7.1      buffer
INFO [Bundler] Auto tracing package: 1.0.1      des.js
INFO [Bundler] Auto tracing package: 3.1.0      hash-base
INFO [Bundler] Auto tracing package: 4.0.1      miller-rabin
INFO [Bundler] Auto tracing package: 5.1.6      parse-asn1
INFO [Bundler] Auto stubbing module: stream
INFO [Bundler] Auto tracing package: 1.3.0      string_decoder
INFO [Bundler] Auto tracing package: 1.5.1      base64-js
INFO [Bundler] Auto tracing package: 1.0.3      buffer-xor
INFO [Bundler] Auto tracing package: 1.1.7      hash.js
INFO [Bundler] Auto tracing package: 1.0.1      hmac-drbg
INFO [Bundler] Auto tracing package: 1.2.1      ieee754
INFO [Bundler] Auto tracing package: 1.0.1      minimalistic-assert
INFO [Bundler] Auto tracing package: 1.0.1      minimalistic-crypto-utils
INFO [Bundler] Auto tracing package: 1.0.2      util-deprecate
INFO [Bundler] Auto tracing package: 5.4.1      asn1.js
INFO [Bundler] Auto tracing package: 2.1.2      safer-buffer
INFO [Bundle] Writing app-bundle.js...
INFO [Bundle] Writing vendor-bundle.js...
Finished 'writeBundles'

但是，该应用程序现在无法加载，并且 Web 控制台上出现以下错误

...

Uncaught ReferenceError: exports is not defined
    <anonymous> utils.js:3
utils.js:3
XHRGEThttp://localhost:9000/__dev_socket.io/?EIO=4&transport=polling&t=Nmn0ZSw&sid=A73E1yB2LRv80nHnAAAA
[HTTP/1.1 200 OK 1ms]

GEThttp://localhost:9000/favicon.ico
[HTTP/1.1 200 OK 2ms]

XHRGEThttp://localhost:9000/__dev_socket.io/?EIO=4&transport=polling&t=Nmn0ZTn&sid=A73E1yB2LRv80nHnAAAA
[HTTP/1.1 200 OK 37ms]

GEThttp://localhost:9000/src/aurelia-bootstrapper.js
[HTTP/1.1 404 Not Found 5ms]

The resource from “http://localhost:9000/src/aurelia-bootstrapper.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). localhost:9000
Loading failed for the <script> with source “http://localhost:9000/src/aurelia-bootstrapper.js”. localhost:9000:1:1
Uncaught Error: Script error for "aurelia-bootstrapper"
https://requirejs.org/docs/errors.html#scripterror
    makeError require.js:168
    onScriptError require.js:1738
    load require.js:1943
    load require.js:1685
    load require.js:834
    fetch require.js:824
    check require.js:856
    enable require.js:1176
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    init require.js:788
    localRequire require.js:1460
    setTimeout handler*req.nextTick< require.js:1815
    localRequire require.js:1449
    configure require.js:1387
    requirejs require.js:1794
    <anonymous> require.js:2144
    <anonymous> require.js:2145
require.js:168

...

我尝试使用几个较早版本的 pouchdb-browser (@7.2.1, @7.1.1)，但在 Web 控制台上出现另一种错误

Uncaught (in promise) ReferenceError: process is not defined
    <anonymous> index.js:6
    execCb require.js:1696
    check require.js:878
    enable require.js:1176
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    init require.js:788
    localRequire require.js:1460
    setTimeout handler*req.nextTick< require.js:1815
    localRequire require.js:1449
    requirejs require.js:1797
    loadModule aurelia-loader-default.js:165
    loadModule aurelia-loader-default.js:164
    importViewModelResource aurelia-templating.js:3594
    ensureViewModel aurelia-templating.js:4960
    createController aurelia-templating.js:4936
    _createControllerAndSwap aurelia-templating.js:4908
    compose aurelia-templating.js:5010
    compose aurelia-templating.js:5275
    setRoot aurelia-framework.js:215
    configure main.js:14
    promise callback*configure main.js:14
    config aurelia-bootstrapper.js:138
    promise callback*config aurelia-bootstrapper.js:133
    p aurelia-bootstrapper.js:169
    promise callback*bootstrap aurelia-bootstrapper.js:168
    run aurelia-bootstrapper.js:155
    promise callback*run aurelia-bootstrapper.js:150
    <anonymous> aurelia-bootstrapper.js:175
    execCb require.js:1696
    check require.js:883
    enable require.js:1176
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    enable require.js:1557
    enable require.js:1161
    bind require.js:134
    each require.js:59
    enable require.js:1113
    init require.js:788
    localRequire require.js:1460
    setTimeout handler*req.nextTick< require.js:1815
    localRequire require.js:1449
    configure require.js:1387
    requirejs require.js:1794
    <anonymous> require.js:2144
    <anonymous> require.js:2145

我尝试使用“alameda”捆绑器/模块加载器而不是 requirejs，但在 Web 控制台上仍然出现错误。我还尝试安装单个 pouchDB 包（pouchdb-core、pouchdb-adapter-idb）而不是预设包（pouchdb-browser），但我仍然遇到同样的错误。

我认为这可能是 aurelia 内置捆绑器无法自动处理的极端情况之一，并且 aurelia.json 配置文件中需要进行一些配置。

有人设法将 pouchDB 库捆绑在 Aurelia v1 应用程序中吗？有人可以帮忙吗？

标签： npmaureliapouchdb

解决方案

我曾将 pouchdb-browser 与 Aurelia v1 一起使用，它以前曾工作过，尽管我最近没有尝试过。但是，我确实必须将以下内容添加到 main.js 以使其正常工作：

//to make pouchdb-browser work
import process from 'process';
  window.process = process;
  import {Buffer} from 'buffer';
  window.Buffer = Buffer;

推荐阅读