使用 socket.io 客户端在 typescript 中生成 Rollup js 包时出错，“'io' 未导出（...”

Question

尝试在导入 socket.io (v3) 的打字稿项目中生成带有汇总的捆绑包时出现错误。我从 typescript 中 Phaser3 的项目模板开始 https://github.com/photonstorm/phaser3-typescript-project-template，它工作正常。所以我只运行npm install socket.io-client --save，并将我的game.ts更改为导入io函数，代码如下。从 v3 开始，socket.io-client 不需要单独的包类型，如本文档中所述。所以我刚刚在我的 game.ts 文件中导入并且类型在 vscode 自动完成中工作，并且 tsc 编译器正常工作，但是在使用 rollup --config rollup.config.dev.js 生成包时出现错误

错误：

> rollup --config rollup.config.dev.js
./src/game.ts → ./dist/game.js...
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
src/game.ts: (3:9)
[!] Error: 'io' is not exported by node_modules/socket.io-client/build/index.js, imported by src/game.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/game.ts (3:9)
1: import { __extends } from "tslib";
2: import 'phaser';
3: import { io } from "socket.io-client";
            ^
4: var Demo = /** @class */ (function (_super) {
5:     __extends(Demo, _super);
Error: 'io' is not exported by node_modules/socket.io-client/build/index.js, imported by src/game.ts
    at error (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:4528:30)
    at Module.error (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:9935:16)
    at Module.traceVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:10328:29)
    at ModuleScope.findVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:8783:39)
    at FunctionScope.findVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at ChildScope.findVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at FunctionScope.findVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at ChildScope.findVariable (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:2622:38)
    at Identifier$1.bind (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:3977:40)
    at CallExpression$1.bind (/mnt/hdd/Meus Códigos/freeboard/client-ts/node_modules/rollup/dist/shared/rollup.js:2709:23)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! freetable@0.0.1 dev: `rollup --config rollup.config.dev.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the freetable@0.0.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/felipe/.npm/_logs/2021-01-31T18_45_41_975Z-debug.log

我的汇总配置：

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import typescript from 'rollup-plugin-typescript2';

export default {

    //  Our games entry point (edit as required)
    input: [
        './src/game.ts'
    ],

    //  Where the build file is to be generated.
    //  Most games being built for distribution can use iife as the module type.
    //  You can also use 'umd' if you need to ingest your game into another system.
    //  The 'intro' property can be removed if using Phaser 3.21 or above. Keep it for earlier versions.
    output: {
        file: './dist/game.js',
        name: 'MyGame',
        format: 'iife',
        sourcemap: true,
        intro: 'var global = window;'
    },

    plugins: [

        //  Toggle the booleans here to enable / disable Phaser 3 features:
        replace({
            'typeof CANVAS_RENDERER': JSON.stringify(true),
            'typeof WEBGL_RENDERER': JSON.stringify(true),
            'typeof EXPERIMENTAL': JSON.stringify(true),
            'typeof PLUGIN_CAMERA3D': JSON.stringify(false),
            'typeof PLUGIN_FBINSTANT': JSON.stringify(false),
            'typeof FEATURE_SOUND': JSON.stringify(true)
        }),

        //  Parse our .ts source files
        resolve({
            extensions: [ '.ts', '.tsx' ]
        }),

        //  We need to convert the Phaser 3 CJS modules into a format Rollup can use:
        commonjs({
            include: [
                'node_modules/eventemitter3/**',
                'node_modules/phaser/**',
            ],
            exclude: [ 
                'node_modules/phaser/src/polyfills/requestAnimationFrame.js',
            ],
            sourceMap: true,
            ignoreGlobal: true
        }),

        //  See https://www.npmjs.com/package/rollup-plugin-typescript2 for config options
        typescript(),

        //  See https://www.npmjs.com/package/rollup-plugin-serve for config options
        serve({
            open: true,
            contentBase: 'dist',
            host: 'localhost',
            port: 10001,
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        })

    ]
};

我的 tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*"
    ]
}

ps：sockewt.io-client 有一个 index.js（在其 package.json 中设置为“main”）和一个 index.d.ts。 index.d.ts 会导出“io”，但汇总似乎只在 index.js 中寻找导出。我需要说汇总使用 index.d.ts。

Answer 1

您必须告诉“rollup-commonjs-plugin”将您导入的库的模块转换为 Rollup 可以使用的格式：

在您的汇总配置中编辑有关 commonjs-plugin 的部分：

    commonjs({
        include: [
            'node_modules/eventemitter3/**',
            'node_modules/phaser/**',
            'node_modules/socket.io-client/**',
        ],
        exclude: [ 
            'node_modules/phaser/src/polyfills/requestAnimationFrame.js',
        ],
        sourceMap: true,
    }),