在 Angular 6 项目中转译为 ES5 损坏的 JS 库答案

【问题标题】：Transpile to ES5 corrupt JS library in Angular 6 project在 Angular 6 项目中转译为 ES5 损坏的 JS 库
【发布时间】：2018-07-25 15:46:35
【问题描述】：

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

我使用以下方法在我的模块中导入了库：

import { default as Dygraph } from 'dygraphs';

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

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

出现错误SCRIPT1003: Expected ':'.。它停止加载的块是：

    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 文件，我们可以观察到在编译过程中键已被删除。原文件中的函数：

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 文件保持不变：

{
  "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"
    ]
  }
}

有人知道吗？

【问题讨论】：

{pos, label, has_tick} 是 ES6 语法，IE11 不支持。也许您没有正确地转换为 ES5？您也可以将该行手动编辑为{pos:pos, label:label, has_tick:has_tick}，这与 ES5 语法中的数据结构相同，但如果您的代码使用 ES6 功能并且您没有正确转换为 ES5，那么代码中可能还有其他区域会也有问题，所以您可能需要修复转译设置。
库默认有{pos:pos, label:label, has_tick:has_tick}。但由于某些原因，代码被转译为 ES6，但我不知道为什么。所有 Angular / CoreUI 组件都可以工作，只有这个库会导致问题。也许它与我导入它的方式有关？
这确认是您的转译配置设置实际上正在将工作 ES5 代码转换为 ES6+ 代码。我真的不知道 TypeScript 配置，但为什么 lib 设置为“es2017”。当您可能想要转译为“ES5”时，您似乎正在转译为 ES2017。

标签： javascript node.js angular ecmascript-5 tsconfig

【解决方案1】：

事实证明，按照 jfriend00 的建议，配置需要是：

{
  "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的作用在文档中不是很清楚，但它似乎应该列出所有要编译的源代码的格式。

因为我有 DOM、ES5 和 ES6 代码，所以我需要所有这些。我使用的模板仅包含 DOM/ES6 代码，这可能就是为什么 lib 仅设置为 DOM/ES2017 的原因。

【讨论】：