与tsify和firebase一起使用的Babelify不会生成正确的代码

Question

在对我的构建环境进行了长时间的更改之后，我已经到达了这一点。我从来没有用过巴别塔，因为它不是必须的。但包括firebase包在内，破坏了构建，我在网上找到的所有解决方案都建议使用babel将包转换为可编译的东西。但是当我现在编译我的代码时，在运行时找不到firebase。

我的ts代码：

import firebase from 'firebase/compat/app';

const auth = firebase.auth();

这会在运行时生成以下错误：

Login.ts:15 Uncaught TypeError: app_1.default.auth is not a function

我的吞咽脚本如下所示：

        let buildTask = browserify({
            basedir: Config.srcPath,
            debug: Flags.isDebug,
            entries: ['./index.ts'],
            cache: {},
            packageCache: {}
        })
            .plugin('tsify')
            .transform('babelify', {
                presets: [
                    ["@babel/preset-env", {
                        "useBuiltIns": "usage",
                        "corejs": 3,
                    }]
                ],
                sourceMaps: true,
                global: true,
                extensions: ['.tsx', '.ts', '.js'],
                ignore: [/\/node_modules\/(?!(firebase\/|@firebase\/))/]
            })
            .bundle()
            .pipe(source('bundle.js'))
            .pipe(buffer());

和我的tsconfig的完整性：

{
    "compilerOptions": {
        "strict": true,
        "strictNullChecks": false,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "module": "CommonJS",
        "target": "es6"
    }
}

非常感谢大家的指点！

Answer 1

事实证明是这样的，我只需要添加两个导入：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

我真的不明白没有导入内容的导入在typescript中是做什么的。但是它似乎触发了js代码正在被babel导入(或者browserify?)