当将 D3 导入 Angular5 时，我在 FF 中得到“SyntaxError：函数语句需要一个名称”，在 IE 中得到“Uncaught SyntaxError：Unexpected token (”答案

【问题标题】：I get, "SyntaxError: function statement requires a name" in FF, and "Uncaught SyntaxError: Unexpected token (" in IE, when importing D3 into Angular5当将 D3 导入 Angular5 时，我在 FF 中得到“SyntaxError：函数语句需要一个名称”，在 IE 中得到“Uncaught SyntaxError：Unexpected token (”
【发布时间】：2018-08-01 15:14:01
【问题描述】：

更新：我的领导能够解决这个问题。请参阅下面的答案，我希望这至少对某些人有所帮助

以下代码会引发异常，但请注意，当我不导入/使用 d3-selection 时，整个应用程序运行时不会出现错误。一旦我从“d3-selection”导入选择，我就会收到我在标题中提到的错误。

import { Component, ElementRef, ViewChild } from '@angular/core';
import { select } from 'd3-selection';

@Component({
    selector: 'pie',
    template: `<ng-content></ng-content>`
})
export class PieChartComponent {
    @ViewChild('containerPieChart')
    private element: ElementRef;

    constructor() {
        select(this.element.nativeElement);
    }
}

我在这里检查了可能的骗子，但没有一个适用于我，所以我在这里。

从 TypeScript 捆绑/导入的代码是：

function(name) {
  return select(creator(name).call(document.documentElement));
}

我知道这在 JS 中是无效的，因为函数必须有名称，或者是 IIFE 才能省略名称。或对象声明。那么，为什么 d3 会转译成无效的 JS？

编辑：我正在使用带有以下代码的 rollup.config.dev.js：

import bundles from './bundles.json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import scss from 'rollup-plugin-scss';
import sourcemaps from 'rollup-plugin-sourcemaps';

const
    DEV_DIRECTORY = `dev`
    , MODULE_NAME_PATH = 'AST.app'
;

function createDevBundle(bundle) {
    let bundleDirectory = `${DEV_DIRECTORY}/${bundle.name}`;

    return {
        input: bundle.input,
        name: `${MODULE_NAME_PATH}.${bundle.name}`,
        output: {
            file: `${bundleDirectory}/${bundle.name}.js`,
            format: 'umd'
        },
        exports: 'default',
        plugins: [
            resolve({
                jsnext: true,
                module: true
            }),
            commonjs(),
            sourcemaps(),
            scss({
                output: `${bundleDirectory}/${bundle.name}.css`,
                includePaths: ['../global/scss/base']
            })
        ],
        onwarn: function(warning) {
            // Recommended warning suppression by angular team.
            if (warning.code === 'THIS_IS_UNDEFINED') {
                return;
            }

            // eslint-disable-next-line no-console
            console.error(warning.message);
        },
        treeshake: false,
        sourcemap: true
    };
}

export default bundles.map(createDevBundle);

【问题讨论】：

在没有类型定义的情况下迁移到 D3V3 作为一种解决方法，直到我弄清楚这个坏男孩。

标签： javascript d3.js angular5

【解决方案1】：

我无法做到，但我的领导能够解决此问题。 package.json 中更新了以下软件包：

"rollup-plugin-commonjs": "8.3.0",
"rollup-plugin-execute": "1.0.0",
"rollup-plugin-node-resolve": "3.0.3",
"rollup-plugin-sourcemaps": "0.4.2",
"rollup-plugin-uglify": "3.0.0"

对 rollup.config.js 和 rollup.config.dev.js 进行了更新。 name、exports 和 sourcemap 部分已移至 output 部分。见下文：

function createDevBundle(bundle) {
    let bundleDirectory = `${DEV_DIRECTORY}/${bundle.name}`;

    return {
        input: bundle.input,
        output: {
            file: `${bundleDirectory}/${bundle.name}.js`,
            name: `${MODULE_NAME_PATH}.${bundle.name}`,
            exports: 'default',
            sourcemap: true,
            format: 'umd'
        }
... [omitted for brevity]

【讨论】：