webpack - Typescript，Webpack：未捕获的 TypeError：Object(...) 不是函数

问题描述

我使用 Typescript 创建了自己的函数库。该库的组件之一是Aircraft.ts，它导出函数：

export function SimulateAircraft(dt: number, s0: IAircraftState, phi_cmd: number): IAircraftState

然后使用 Webpack、ts-loader 和 dts-bundle 将它们打包成一个 .js 文件和一个 .d.ts 文件。index.ts只是重新导出所有组件：

export * from './components/Aircraft'

该库未部署到 npm，但我已使用npm link.

然后，我将库中的函数导入另一个 Typescript 项目。

import { IAircraftState, SimulateAircraft } from 'oset';

我使用该功能的地方如下：

setInterval(() => {
      const ac = SimulateAircraft(0.1, this.state.ac, 0);
      this.setState({ ac });
    }, 100);

该项目构建没有任何错误。VSCode 也没有显示任何错误，并且智能感知正确显示了导入的函数定义。但是在运行时，我在浏览器控制台中收到以下错误：

Uncaught TypeError: Object(...) is not a function

错误所指的对象SimulateAircraft似乎是未定义的。我已经搜索了很长时间以尝试找到解决方案。我发现了类似的错误及其解决方案，但我还没有找到解决我问题的解决方案。我真的很感激一些帮助。

webpack.config.js

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');

const libraryName = 'oset';

module.exports = {
    mode: "development",
    devtool: 'inline-source-map',
    entry: './src/index.ts',
    output: {
        filename: 'oset.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true
            })
        ]
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: [/node_modules/, /coverage/]
        }]
    },
    plugins: [
        new DtsBundlePlugin()
    ]
};

function DtsBundlePlugin() { }
DtsBundlePlugin.prototype.apply = function (compiler) {
    compiler.plugin('done', function () {
        var dts = require('dts-bundle');

        dts.bundle({
            name: 'oset',
            main: 'dist/index.d.ts',
            out: 'oset.d.ts',
            removeSource: true,
            outputAsModuleFolder: true // to use npm in-package typings
        });
    });
};

包.json

{
  "name": "oset",
  "version": "0.0.0",
  "description": "...",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "webpack",
    "clean": "rm -rf dist",
    "coverage": "npm test -- --coverage",
    "test": "jest --watch"
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "devDependencies": {
    "@types/jest": "^23.3.1",
    "dts-bundle": "^0.7.3",
    "jest": "^23.5.0",
    "ts-jest": "^23.1.4",
    "typescript": "^3.0.3"
  },
  "dependencies": {
    "redux": "^4.0.0"
  },
  "jest": {
    "testEnvironment": "node",
    "collectCoverageFrom": [
      "<rootDir>/src/*/**.{ts,tsx}"
    ],
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "verbose": true,
    "testURL": "http://localhost/"
  }
}

标签： webpackimporttypeerror

webpack - Typescript，Webpack：未捕获的 TypeError：Object(...) 不是函数

问题描述

解决方案

推荐阅读