webpack - typescript ，Webpack : Uncaught TypeError: Object(. ..) 不是函数

Question

我已经使用 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
        });
    });
};

package.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/"
  }
}

Answer 1

可能为时已晚，但请尝试:

import * as aircraft from 'oset';

然后:

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