Question

我尝试使用Webpack和TypeScript创建npm模块。构建好程序包并尝试导入后，我有一个空对象，而不是默认的导出函数。

您可以看到我的配置：

Webpack.js：

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.ts(x)?$/,
        use: ['awesome-typescript-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

module.exports = config;

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true
  },
  "include": ["./src/**/*"]
}

我的模块是build，但是默认导入返回一个空对象。我尝试使用示例功能：

const test = () => console.log('test');

export default test;

import test from 'my-module-name'; test() // test is not a function

任何人都已经使用webpack和typescript创建了npm模块吗？

谢谢社区！

Answer 1

基于this thread，您必须将libraryTarget: "commonjs2"添加到Webpack配置中。

这里是例子：

module.exports = {
    ...
    output: {
        path     : path.resolve(__dirname, 'dist'),
        filename : '[name].js',
        libraryTarget : 'commonjs2' // Add this line
    },
    ...
}

我之前已经实现了此解决方案，并且它也可以在TypeScript + Webpack上遇到类似问题。

模块导入返回空对象

1 个答案: