我需要为 ES6 配置 webpack 吗？答案

【问题标题】：Do I need to configure webpack for ES6?我需要为 ES6 配置 webpack 吗？
【发布时间】：2019-09-11 02:40:26
【问题描述】：

我有一个带有 .tsconfig 文件的 Angular 应用程序，该文件针对 ES6。

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

以下角度组件（Typescript）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { DispositifsDATIRoutingModule } from './dispositifsDATI.routes';
import { SharedModule } from '../shared/shared.module';
import { DISPOSITIFS_DATI_COMPONENTS } from './index';

import { InputUtilitiesModule } from 'ng-uikit-pro-standard';
import { MaterialChipsModule, BadgeModule, IconsModule, WavesModule } from 'ng-uikit-pro-standard';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    HttpClientModule,
    DispositifsDATIRoutingModule,
    InputUtilitiesModule,
    MaterialChipsModule,
    BadgeModule,
    IconsModule,
    WavesModule
  ],

  declarations: [DISPOSITIFS_DATI_COMPONENTS]
})

export class DispositifsDATIModule { }

被 webpack 转译成：

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DispositifsDATIModule", function() { return DispositifsDATIModule; });

在运行时失败：

ReferenceError：在初始化之前无法访问“DispositifsDATIModule”

我不知道这里发生了什么。

围绕使用 ES6，webpack 配置有什么需要改变的吗？

编辑：这似乎是angular 和/或TypeScript 中关于 ES2015 的问题

【问题讨论】：

由于 ts 代码中的错误，我收到此错误。当我导航到路线的 url 时，它给了我更具体的错误消息。

标签： angular typescript es6-modules

【解决方案1】：

好吧，这个错误是因为我引用了一个使用 TypeScript 装饰器的模块。我删除了装饰器以支持等效的 API，问题就消失了。

编辑 04/09/2019：

为了清楚起见，我使用的是 Angular 7.5，它要求将 emitDecoratorMetadata 设置为 true。我刚刚了解到我的外部模块需要 experimentalDecorators 而不是 emitDecoratorMetadata。

所以，升级到 Angular 8 并将 emitDecoratorMetadata 设置为 false，我就可以使用这个外部库了。

【讨论】：

【解决方案2】：

我猜你这里有循环依赖，你的组件文件（假设它是MyComponent.ts）从./index.ts 导入DISPOSITIFS_DATI_COMPONENTS，而index.ts 从./MyComponent.ts 导入组件。

所以他们相互依赖。在这种情况下，DISPOSITIFS_DATI_COMPONENTS 在你使用的时候是无法初始化的。

为了避免循环依赖，我会把它解压到第三个文件中

UPD：这是一篇有用的文章https://blog.angularindepth.com/how-to-break-a-cyclic-dependency-between-es6-modules-fd8ede198596

【讨论】：

谢谢，但在查看我们的代码后，这不是循环引用问题。问题已更新。
您添加的链接是关于循环依赖的。他们说“我们在这里有循环依赖，但不应该如此”。即便如此，获得错误的唯一方法是循环依赖。从“./index”导入一些东西就像证据。