如何使用 SystemJS（在 Typescript 中）递归加载依赖项（SQLite3）？

Question

我最近玩过 typescript、Angular2 和 nw.js。

我有一个基于 Angular2 quickstart guide for plain javascript 的小项目并让它工作。我添加了 sqlite3 并让它在 nw.js 中也能工作，所以我可以从数据库中加载一些英雄。

现在，正如 Angular 教程所指出的，打字稿似乎是使用 Angular2 时的最佳选择。所以我尝试了另一个项目，按照教程中的所有这些步骤，让它在本地（在浏览器中）和 nw.js 中都能正常工作。

但是，我无法让 sqlite3 在它们中的任何一个中工作。 据我了解，在 typescript 中添加 js 库的最佳方法是向它们添加类型。幸运的是有一个 sqlite3 绝对类型库。

我使用以下命令安装了 sqlite3：

npm install sqlite3 --build-from-source --runtime=node-webkit --target_arch=x64 --target=0.15.4

并安装了类型

typings install dt~sqlite3 --global --save

现在我想在我的服务上导入 sqlite3，所以我添加了这些行：

/// <reference path="../typings/index.d.ts"/>
import * as sqlite3 from 'sqlite3';
let db = new sqlite3.Database('../data/database.sqlite');

typescript 现在编译时没有错误，但是当我在浏览器或 nw.js 中加载站点时，它会尝试直接从 root 下载 sqlite3 并给我这个错误：

Error loading http://localhost:3000/sqlite3 as "sqlite3" from http://localhost:3000/app/hero.service.js

sqlite3 当然不在项目根目录中，因此它为此运行在 404 中。但它为什么还要在这个地方找它呢？

我的应用结构就像routing step in the Angular2 tutorial的末尾

project
|
+-- app
|   |
|   +-- hero.service.ts
|
+-- data
|   |
|   +-- database.sqlite
|
+-- node_modules
|   |
|   +-- sqlite 3
|        |
|        +-- sqlite3.js
|
+-- typings
|   |
|   +-- index.d.ts
|   |
|   +-- globals
|       |
|       +-- sqlite3
|           |
|           +-- index.d.ts

我的打字.json：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320",
    "sqlite3": "registry:dt/sqlite3#2.2.3+20160316155526"
  }
}

我的 hero.service.ts 顶部：

/// <reference path="../typings/index.d.ts"/>

import { Injectable } from '@angular/core';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

import * as sqlite3 from 'sqlite3';

sqlite3.verbose();
let db = new sqlite3.Database('../data/database.sqlite');

@Injectable()
export class HeroService {
    // ...

编辑： 所以感谢@arpit-agarwal，我将 sqlite3 添加到我的 systemjs.config.js 中，现在错误是另一个。它无法加载 sqlite 依赖项，如 node-pre-gyp、路径、事件等。我可以在 map 属性中设置这些，但显然不是手动设置每个依赖项的路径（并且 sqlite3 有很多依赖项）的路径。这不适用于事件，因为它是 node.js 中包含的一个包。我的 systemjs.config.js 现在看起来像这样：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs',
        'sqlite3': 'node_modules/sqlite3'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'sqlite3': { main: 'sqlite3.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

systemjs.config.js 编辑后的完整错误消息：

Error loading http://localhost:3000/node-pre-gyp as "node-pre-gyp" from http://localhost:3000/node_modules/sqlite3/lib/sqlite3.js

也获得 404 开启

http://localhost:3000/path
http://localhost:3000/events
http://localhost:3000/util

那么有没有合适的方法告诉 systemjs 也加载依赖模块？

编辑2： 我使用 angular-cli-build 建立了一个项目并执行了@arpit-agarwal 建议的步骤，但我遇到了同样的问题，它无法加载事件和路径。 ng 构建失败：

Error on fetch for node-pre-gyp at file:///C:/Dev/ang_test/tmp/bundle_plugin-input_base_path-wATtw5FK.tmp/0/node-pre-gyp
    Loading vendor/sqlite3/lib/sqlite3.js
    Loading vendor/sqlite3/sqlite3.js
    Loading app/hero.service.js
    Loading app/heroes/heroes.component.js
    Loading app/app.routes.js
    Loading main.js
    Error: ENOENT: no such file or directory, open 'C:\Dev\ang_test\tmp\bundle_plugin-input_base_path-wATtw5FK.tmp\0\node-pre-gyp

我也尝试了一个使用 jspm 的项目，但无法让 Angular2 工作，除非我使用 npm 而不是 jspm 安装它，这对我来说似乎毫无意义。这也导致了同样的问题。 在阅读了几篇关于 Angular、JSPM 等的博客和教程后，我已经没有什么想法可以让它工作了。

让我烦恼的是，它确实适用于纯 JavaScript。我有一个使用 Angular2 在 nw.js 中运行的应用程序，它正在从 SQLite3 数据库加载数据。但是用纯 javascript 编写一个 Angular2 应用程序并不容易。几乎所有的文档和教程都使用 typescript。我可以看到，这是一种很好的语言。也许我看看反应。

有没有其他选择，比如使用 SystemJS 以外的任何东西？我对 node.js 还是很陌生。

Answer 1

您需要通过更新angular-cli-build.js 文件将sqlite3 复制到vendor 目录。 sqlite3/**/*.* 作为 vendorNpmFiles 标记中的条目。 一旦你通过npm start 运行构建。您应该手动验证此文件是否存在于dist/vendor 目录中。 您还需要更新 system.config.ts 以在供应商目录中查找 sqllite3。在map函数里面添加

Sqlite3: vendor/sqlite3 // you can give full path of JS file as well depending upon usage and error message.