在Angular 6项目中转换为ES5损坏的JS库 [英] Transpile to ES5 corrupt JS library in Angular 6 project

问题描述

我正在尝试在Angular 6项目中使用Dygraph库.它在Chrome/FF中完美运行，但是在IE11中不起作用.我通过npm安装了该库，并从 https://github安装了@types.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dygraphs

I am trying to use Dygraph library in an Angular 6 project. It works perfectly in Chrome / FF, however it does not work in IE11. I installed the library through npm, and installed the @types from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dygraphs

我使用以下命令将库导入到模块中:

I imported the library in my module using:

import { default as Dygraph } from 'dygraphs';

当我在IE11上打开页面时，加载停止于:

When I open the page on IE11, loading stops on:

this.xticks.push({pos, label, has_tick});

出现错误 SCRIPT1003:预期为:"..停止加载的块是:

With error SCRIPT1003: Expected ':'.. The block where it stops loading is:

    DygraphLayout.prototype._evaluateLineTicks = function() {
      var i, tick, label, pos, v, has_tick;
      this.xticks = [];
      for (i = 0; i < this.xTicks_.length; i++) {
        tick = this.xTicks_[i];
        label = tick.label;
        has_tick = !('label_v' in tick);
        v = has_tick ? tick.v : tick.label_v;
        pos = this.dygraph_.toPercentXCoord(v);
        if ((pos >= 0.0) && (pos < 1.0)) {
          this.xticks.push({pos, label, has_tick});    <<--- This line stops
        }
      }

      this.yticks = [];
      for (i = 0; i < this.yAxes_.length; i++ ) {
        var axis = this.yAxes_[i];
        for (var j = 0; j < axis.ticks.length; j++) {
          tick = axis.ticks[j];
          label = tick.label;
          has_tick = !('label_v' in tick);
          v = has_tick ? tick.v : tick.label_v;
          pos = this.dygraph_.toPercentYCoord(v, i);
          if ((pos > 0.0) && (pos <= 1.0)) {
            this.yticks.push({axis: i, pos, label, has_tick});
          }
        }
      }
    };

通过查看原始js文件，我们可以观察到在编译过程中已删除了密钥.原始文件中的功能:

By looking at the original js file, we can observe that the keys have been removed during compilation. Functions in the original file:

DygraphLayout.prototype._evaluateLineTicks = function () {
  var i, tick, label, pos, v, has_tick;
  this.xticks = [];
  for (i = 0; i < this.xTicks_.length; i++) {
    tick = this.xTicks_[i];
    label = tick.label;
    has_tick = !('label_v' in tick);
    v = has_tick ? tick.v : tick.label_v;
    pos = this.dygraph_.toPercentXCoord(v);
    if (pos >= 0.0 && pos < 1.0) {
      this.xticks.push({ pos: pos, label: label, has_tick: has_tick });
    }
  }

  this.yticks = [];
  for (i = 0; i < this.yAxes_.length; i++) {
    var axis = this.yAxes_[i];
    for (var j = 0; j < axis.ticks.length; j++) {
      tick = axis.ticks[j];
      label = tick.label;
      has_tick = !('label_v' in tick);
      v = has_tick ? tick.v : tick.label_v;
      pos = this.dygraph_.toPercentYCoord(v, i);
      if (pos > 0.0 && pos <= 1.0) {
        this.yticks.push({ axis: i, pos: pos, label: label, has_tick: has_tick });
      }
    }
  }
};

我不明白为什么将工作库转换为非工作文件.我的tsconfig.json文件未更改:

I do not understand why a working library get converted into a non working file. My tsconfig.json file is untouched:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

有人有什么线索吗?

推荐答案

结果表明，按照jfriend00的建议，配置必须为:

Turns out that, as recommended by jfriend00, the configuration needed to be:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es5",
      "es6",
      "dom"
    ]
  }
}

lib的作用在文档中并不清楚，但是似乎应该列出所有要编译的源代码的格式.

What does lib does is not that clear in the documentation, but it seems that it should list the formats from all source codes to be compiled.

由于我拥有DOM，ES5和ES6代码，因此我需要它们全部.我使用的模板仅包含DOM/ES6代码，这可能就是为什么lib仅设置为DOM/ES2017的原因.

As I have DOM, ES5 and ES6 code, I needed all of them. The template I used only contained only DOM/ES6 code, that is probably why the lib was set to DOM/ES2017 only.

这篇关于在Angular 6项目中转换为ES5损坏的JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！