如何 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');

如果我控制台記錄要求，它將是一個模塊 object，如我所料，具有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';

此代碼將function2 function1.ts function1 function2.ts不提供自己的默認導出。

您可以嘗試以下方法

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

export default { function1, function2 };

Heres 一個CodeSandbox展示了這一點。 （我的例子混合了 ts 和 js，但它不應該對你在這里做的事情產生影響）

希望有幫助！