SystemJS 找不到带有 typescript 和 electron 的 xml-js 模块

Question

我正在尝试要求 xml-js 模块 (https://www.npmjs.com/package/xml-js) 在我现有的 Electron + Typescript 项目中进行一些 XML 解析。

我有点困惑的是它为什么会抛出错误。

首先，tsconfig.json 文件如下：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir":   "dist"
    },
    "exclude": [
        "node_modules"
    ]
}

systemjs 配置的相关部分在这里：

    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      'xml-js': 'npm:xml-js'
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
    rxjs: {
       defaultExtension: 'js'
     }
    }

因此该模块位于 node_modules/xml-js（与许多其他模块一样）。

当我构建我的应用程序时，出现以下错误：

file://<path>/Documents/projectFolder/electron-angular2-rc6/ng2-electron/node_modules/xml-js Failed to load resource: net::ERR_FILE_NOT_FOUND

和：

index.html:18 Error: (SystemJS) XHR error loading file://<path>/Documents/projectFolder/electron-angular2-rc6/ng2-electron/node_modules/xml-js

我正在尝试通过以下方式加载模块：

const parser = require("xml-js");

（所以，作为 vanilla JS），在我的打字稿组件中（application.component.ts）。

我的 index.html 的相关部分是：

<script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });

        document.addEventListener('dragover',function(event){
            event.preventDefault();
            return false;
        },false);

        document.addEventListener('drop',function(event){
            event.preventDefault();
            return false;
        },false);
    </script>

模块已通过以下方式安装：

npm install xml-js --save-dev

并且存在于目录node_modules/xml-js

我有很多其他模块（包括 rxjs 和 angular-in-memory-web-api）以及常规的 @angular 模块：它们都在工作正确并且没有抛出错误，但是 xml-js 似乎没有任何工作。

Answer 1

经过几个小时的文档处理，老实说，很失望，我发现您不能直接将节点模块包含在系统中，因为 systemjs 无法解释他们直接。

我不得不改变整个图书馆，并依靠这个： https://www.npmjs.com/package/jxon 它说 "A complete, bidirectional, JXON (lossless JavaScript XML Object Notation) library. Packed as UMD."。我查了一下 "UMD" 是什么意思，意思是 "Universal Module Definition": https://github.com/umdjs/umd

因此，您可能可以使用 UMD 工具将模块包装在您的应用程序中，否则您可以依赖某处可用的现有模块。

就我而言，使用 jxon，我不得不稍微更改一下代码：

首先，在 package.json 中，我删除了 xml-js 并添加了 jxon
在我的 systemjs.config.js 文件中，我在地图列表中添加了模块（连同其他模块）：'jxon':'npm:jxon'
仍然在 systemjs.config.js 文件中，我不得不在 "packages" 部分告诉默认扩展名是 JS，主文件是 jxon.min.js：packages: { jxon: { defaultExtension: 'js', main: 'jxon.min.js' } }
最后但同样重要的是，我可以定期将它包含在我的打字稿文件中而不会出现错误，并且可以使用它提供的原型来实现我的目标（我要求它使用 "require"，而不是 "import"，但它也应该与 import * as jxonparser from 'jxon' 之类的东西一起工作，尽管我使用过：const jxon_parser = require('jxon');

因此，简而言之：您不能将节点模块包含在 systemjs 中，除非它们是 UMD 或可以从 systemjs 解释。如果你想检查 systemjs 支持的格式，检查这个：https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md

SystemJS 找不到带有 typescript 和 electron 的 xml-js 模块

SystemJS cannot find xml-js module with typescript and electron

javascript

typescript

systemjs

electron

angular