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 config的相关部分在这里：

    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 其中写着“一个完整的，双向的，JXON（无损JavaScript XML Object Notation）库。打包为UMD。”。我已经检查了“UMD”的含义，这意味着“通用模块定义”：https://github.com/umdjs/umd

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

在我的情况下，使用jxon，我不得不改变我的代码：

首先，在package.json中我删除了xml-js并添加了jxon
在我的systemjs.config.js文件中，我在地图列表中添加了模块（以及其他模块）：'jxon':'npm:jxon'
仍然在systemjs.config.js文件中，我必须告诉“packages”部分，defaultextension是JS，主文件是jxon.min.js：packages: { jxon: { defaultExtension: 'js', main: 'jxon.min.js' } }
最后但并非最不重要的是，我可以定期将其包含在我的打字稿文件中，没有任何错误，并且可以使用它提供的原型来实现我的目标（我需要使用“require”，而不是“import”，但它虽然我已经使用过import * as jxonparser from 'jxon'

const jxon_parser = require('jxon');

因此，简洁而言：除非它们是UMD或可以从systemjs 解释，否则不能包含带有systemjs的节点模块。如果要检查systemjs支持的格式，请选中：https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md

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

1 个答案: