我需要为 ES6 配置 webpack 吗？

Question

我有一个 angular 应用程序，其中包含针对 ES6 的 .tsconfig 文件。

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

以下 angular 组件（打字稿）：

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: Cannot access 'DispositifsDATIModule' before initialization

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

关于 ES6 的使用，webpack 配置有什么要改变的吗？

编辑：这似乎是 angular and/ or TypeScript 中关于 ES2015

的一个问题

Answer 1

我猜你在这里有循环依赖，你的组件文件（假设它是 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

Answer 2

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

编辑 2019 年 4 月 9 日：

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

所以，升级到 angular 8 并将 emitDecoratorMetadata 设置为 false，允许我使用这个外部库。

我需要为 ES6 配置 webpack 吗？

Do I need to configure webpack for ES6?

typescript

es6-modules

angular