使用socket.io客户端在typescript中生成汇总js包时出错，"'io‘is not exported (...)“

Question

在导入socket.io (v3)的typescript项目中尝试使用rollup生成捆绑包时遇到错误。我从typescript https://github.com/photonstorm/phaser3-typescript-project-template中的phaser3项目模板开始，它工作得很好。因此，我只需运行npm install socket.io-client --save，并更改我的game.ts以导入io函数，如下所示。由于v3，socket.io-client不需要单独的包类型，如本文档所述。所以我刚刚导入了我的game.ts文件，类型在vscode autocomple中工作，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/**/*"
    ]
}

is client有一个index.js (在它的package.json中被设置为"main“)和一个index.d.ts。index.d.ts确实会导出"io"，但rollup似乎只在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,
    }),