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

Question

I'm facing errors while bundling the pouchDB js library in an Aurelia v1 app using the built-in requirejs bundler\/module loader.我在使用内置的 requirejs 捆绑器\/模块加载器在 Aurelia v1 应用程序中捆绑 pouchDB js 库时遇到错误。

I isolated the issue in a minimal Aurelia application: these are the steps to reproduce the error:我在一个最小的 Aurelia 应用程序中隔离了这个问题：这些是重现错误的步骤：

Create a minimal aurelia v1 application using aurelia-cli v2.0.3.使用 aurelia-cli v2.0.3 创建一个最小的 aurelia v1 应用程序。<\/li><\/ol>

 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.<\/code><\/pre> 
         
          Enter the project directory and start the aurelia bundler进入项目目录，启动aurelia bundler<\/li><\/ol> cd test au run --env dev --port 9000 --watch<\/code><\/pre> The minimal aurelia app successfully shows up at localhost:9000最小的 aurelia 应用程序成功显示在 localhost:9000

                
            
             
              Install the browser-optimized preset of pouchDB安装 pouchDB 的浏览器优化预设<\/li><\/ol>npm install pouchdb-browser<\/code><\/pre> 
                   
                    Import and instantiate the PounchDB class in the src\/app.js file在 src\/app.js 文件中导入并实例化 PounchDB 类<\/li><\/ol>import PouchDB from "pouchdb-browser"; export class App { message = 'Hello World!'; constructor() { this.db = new PouchDB("test"); } }<\/code><\/pre> As soon as the pouchDB class is imported in the project, the Aurelia bundler kicks-in and re-bundles all the added dependencies without throwing errors一旦在项目中导入 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'<\/code><\/pre> However, the app now won't load and the following errors appear on the web console但是，该应用程序现在无法加载，并且 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 ...<\/code><\/pre> I tried to use a couple earlier versions of pouchdb-browser (@7.2.1, @7.1.1) but I get another kind of error on the web console我尝试使用几个较早版本的 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<\/code><\/pre> I tried to use the "alameda" bundler\/module loader instead of requirejs, but I still get an error on the web console.我尝试使用“alameda”捆绑器\/模块加载器而不是 requirejs，但在 Web 控制台上仍然出现错误。 I also tried to install individual pouchDB packages (pouchdb-core, pouchdb-adapter-idb) instead of the preset package (pouchdb-browser) but I'm still getting the same error.我还尝试安装单个 pouchDB 包（pouchdb-core、pouchdb-adapter-idb）而不是预设包（pouchdb-browser），但我仍然遇到同样的错误。
 I think this might be one of those corner cases the aurelia built-in bundler is not able to handle automatically and some configuration is needed in the aurelia.json config file.我认为这可能是 aurelia 内置捆绑程序无法自动处理的极端情况之一，并且需要在 aurelia.json 配置文件中进行一些配置。
 Did someone manage to bundle the pouchDB library in an Aurelia v1 app?有人设法将 pouchDB 库捆绑在 Aurelia v1 应用程序中吗？ Can someone please help?有人可以帮忙吗？
"

Answer 1

I had used pouchdb-browser with Aurelia v1, it had worked previously, although I have not tried it recently.我曾将 pouchdb-browser 与 Aurelia v1 一起使用，它以前曾工作过，尽管我最近没有尝试过。 However, I did have to add the following to main.js to get it to work:但是，我确实必须将以下内容添加到 main.js 以使其正常工作：

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

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

问题描述

1 个解决方案

解决方案1
0 2022-02-03 16:33:25

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

问题描述

1 个解决方案

解决方案1 0 2022-02-03 16:33:25

解决方案1
0 2022-02-03 16:33:25