SystemJS 找不到带有打字稿和电子的 xml-js 模块答案

【问题标题】：SystemJS cannot find xml-js module with typescript and electronSystemJS 找不到带有打字稿和电子的 xml-js 模块
【发布时间】：2017-05-05 15:34:20
【问题描述】：

我正在尝试要求 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 似乎无论如何都不能工作。

【问题讨论】：

我不确定，但是电子在运行时是否可以使用 DEV 依赖项？您是否尝试将其安装为普通依赖项：npm install xml-js --save - 而不是 npm install xml-js --save-dev 或将其移动到区域？
@OvidiuDolha：尝试使用 --save 进行安装，但没有任何改变。虽然所有其他模块都是可见的，所以我真的无法猜测这里发生了什么。如果我尝试在 systemjs 配置中强制使用主文件，它会引发另一个错误，就像它试图解析另一个文件一样。（它说它找不到 lib.js，虽然 lib 是一个目录，但看起来它正在将它作为 ES6 模块而不是常规的 nodejs ECMAscript5 导入它）。
确实很奇怪...您可以尝试从 github repo 安装它，看看是否有区别，但可能没有；你也可以尝试更直接地映射 systemjs：map: { 'xml-js': './node_modules/xml-js/index.js' } 甚至到它的 lib 子文件夹 map: { 'xml-js': './node_modules/xml-js/lib/index.js' }
@OvidiuDolha：不幸的是，它仍然无法正常工作并引发同样的错误。令人惊讶的是，现在，无论模块是否被映射，它都会给我抛出错误，所以我的猜测是这个问题与 system-js 本身寻找安装在 node_modules 中的所有模块有关。
@OvidiuDolha：我发现了这个问题：没有办法直接将 xml-js 包含在 systemjs 中（至少在不依赖 jspm 的情况下不能）。原因是systemjs原生不支持nodejs导出的modules格式。对我来说，唯一的解决方案是找到另一个模块“UDM”（通用模块定义），这样您就可以定期导入它而不会出现问题。

标签： javascript angular typescript electron systemjs

【解决方案1】：

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

我不得不改变整个图书馆，并依靠这个： https://www.npmjs.com/package/jxon 上面写着“一个完整的双向 JXON（无损 JavaScript XML 对象表示法）库。打包为 UMD。”。我检查了“UMD”是什么意思，意思是“通用模块定义”：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' } }
最后但并非最不重要的一点是，我可以将它定期包含在我的 typescript 文件中而不会出现错误，并且可以使用它提供的原型来实现我的目标（我要求它使用“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

【讨论】：