如何 module.exports 另一个模块？

Question

我有一个文件，我们将调用file1.ts：

export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';

我使用 Webpack 和 Babel 编译它：

webpack.config.js

const path = require("path");

module.exports = {
  target: "web",
  mode: "production",
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "./lib/cjs"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-react",
            "@babel/preset-typescript",
            [
              "@babel/preset-env",
              {
                targets: ["last 2 versions"],
              },
            ],
          ],
          plugins: ["babel-plugin-styled-components"],
        },
      },
    ],
  },
};

我将其发布到 npm。现在我想将它导入到我们将调用的内容中file2.ts：

import { function1 } from 'package';

但是，function1 不存在，因为如果我这样做，例如import a from 'package';，a是undefined.

为了解决这个问题，我决定创建另一个文件，我们将调用file0.js执行以下操作：

module.exports = require('./file1.js');

如果我控制台日志的需要，这将是一个模块对象function1，并function2作为然而，我期望的，module.exports = require('./file1.js');是不确定的......所以我尝试它的工作原理如下：

var test = require('./file1.js');
module.exports = { ...test };

1. 我不明白为什么这行得通，但module.exports = require('./file1.js');不行。
2. 我不知道我应该这样做的正确方法是什么（导出一个 es5 模块/文件，以便我可以在 es6 中导入它）

Answer 1

webpack 并非旨在支持发射 ES 模块。它的 ES 模块支持适用于在内部使用 ES 模块但以不同格式发出的应用程序。我建议改用Rollup，它具有完整的原生 ES 模块支持，但如果您仍然需要它，也可以支持具有相同配置的 CJS。

Answer 2

我认为您看到的问题是因为您的模块没有默认导出。

export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';

function1.ts此代码公开了as的默认导出和asfunction1的默认导出，但它不提供自己的默认导出。function2.tsfunction2

您可以尝试以下方法

import { default as function1 } from "function1.ts";
import { default as function2 } from "function2.ts";

export default { function1, function2 };

下面是一个CodeSandbox，展示了这一点的实际情况。（我的示例混合了 ts 和 js，但它不应该对您在这里所做的事情产生影响）

希望有帮助！