I get, "SyntaxError: function statement requires a name" in FF, and "Uncaught SyntaxError: Unexpected token (" in IE, when importing D3 into Angular5

Question

更新：我的领导能够解决这个问题。请看下面的答案，我希望这至少能帮助到一些人

以下代码抛出异常，但请注意，当我不 import/use d3-selection 时，整个应用程序运行时不会出现错误。一旦我从 'd3-selection' 导入 select，我就会收到标题中提到的错误。

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);
    }
}

我检查了这里可能的骗子，none 应用到我身上，所以我来了。

来自 TypeScript 的 bundled/imported 代码是：

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

我知道这在 JS 中是无效的，因为函数必须有名字，或者是 IIFEs 才能省略名字。或 object 声明。那么，为什么 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);

Answer 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]

I get, "SyntaxError: function statement requires a name" in FF, and "Uncaught SyntaxError: Unexpected token (" in IE, when importing D3 into Angular5

I get, "SyntaxError: function statement requires a name" in FF, and "Uncaught SyntaxError: Unexpected token (" in IE, when importing D3 into Angular5

javascript

d3.js

angular5