javascript - 为什么 `export default` 会导出一个带有 `default` 的对象而不是对象本身？

Question

所以我有三个 Typescript 文件:

配置/env/development.ts

import { Config } from '../config';

class DevConfig {
    public config : Config = {
        HOST: 'localhost',
        PORT: 8080
    };

    constructor() {
        this.config.HOST = 'localhost';
        this.config.PORT = (process.env.PORT as unknown as number) || 8080;
    }
}

export default new DevConfig().config;

配置/索引.ts

import { Config } from './config';

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

class AppConfig {
    public allConfig : Config;
    public envConfig : Config;

    constructor() {
        this.envConfig = require(`${__dirname}/env/${process.env.NODE_ENV}.js`);
        this.allConfig = require(`${__dirname}/all.js`);
    }
}

export default new AppConfig().envConfig;

另一个文件是:./app.ts

import * as express from 'express';
import { hi } from './controllers/status';
import AppConfig from './config';

class App {
    public express: any;
    public config: object;

    constructor() {
        this.express = express();
        this.config = AppConfig;
        this.mountRoutes();

        console.log(`Output test: ${JSON.stringify(this.config, null, 4)}`);
    }

    private mountRoutes() {
        const router = express.Router();

        router.get('/', hi);
        this.express.use('/', router);
    }
}

export default new App();

我在运行时看到的输出如下:

Output test: { "default": { "HOST": "localhost", "PORT": 8080 } }

“默认”从何而来？如果我尝试执行 console.log(this.config.PORT);，我会得到一个 undefined。有人可以澄清一下吗？

Answer 1

一个模块可以有一个default export和常规export，但是require()只能返回一个值。因此，您使用的转译器必须将多个导出转换为一个值。它通过将所有导出转换为一个对象来实现。

  // this
  export default 1;
  export const named = 2;

  // turns into:
  module.exports = { 
    default: 1,
    named: 2 
  };

由于 default 是保留关键字，因此不能用作命名导出，为 export default 设置一个 default 键可以完美地实现感觉。

您可以使用 require("...").default 轻松获得默认导出。