0

在对构建环境进行了长链更改之后，我已经到达了这一点。我从未使用过 babel，因为它不是必需的。但是包括 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

我的 gulp 脚本如下所示：

        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"
    }
}

我很感谢任何指示！

4

1 回答 1

0

事实证明确实如此，我只需要添加两个导入：

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

我真的不明白没有导入的东西在打字稿中的作用。但似乎它触发了 js 代码正在由 babel （或 browserify？）导入

于 2021-11-07T10:32:00.783 回答