我需要为ES6配置webpack吗? [英] Do I need to configure webpack for ES6?

问题描述

我有一个带有针对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"
    ]
  }
}

以下角度分量(打字稿):

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

解决方案

好的，此错误是由于我引用使用TypeScript装饰器的模块引起的. 我删除了装饰器，转而使用等效的API，问题消失了.

---

编辑04/04/2019 :

请清楚一点，我使用的是Angular 7.5，它需要 emitDecoratorMetadata 设置为true. 我刚刚了解到，我的外部模块要求 experimentalDecorators 不能发出DecoratorMetadata.

因此，升级到angular 8并将emissionDecoratorMetadata设置为false，可以使用此外部库.

I have an angular app with a .tsconfig file targeting 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"
    ]
  }
}

The following angular component (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 { }

is transpiled by webpack to:

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

Which fails at runtime with:

ReferenceError: Cannot access 'DispositifsDATIModule' before initialization

I have no idea what is going on here.

Is there something to change in the webpack config around the use of ES6?

---

EDIT: This seems to be an issue in angular and/ or TypeScript regarding ES2015

解决方案

All right, this error was caused because I was referencing a module that was using TypeScript decorators. I removed the decorators in favor of the equivalent API and the problem is gone.

---

EDIT 04/09/2019:

Just to be clear, I was using Angular 7.5 which requires emitDecoratorMetadata to be set to true. I just learned that my external module requires experimentalDecorators not emitDecoratorMetadata.

So, upgrading to angular 8 and setting emitDecoratorMetadata to false, allows me to use this external library.

这篇关于我需要为ES6配置webpack吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！