javascript - 在 Typescript 中动态导入一个 JS 插件模块

Question

我正在为Obsidian.md创建一个插件。该插件是用 Typescript 编写的，并使用以下内容编译tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": "ESNext",
    "target": "es6",
    "allowJs": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015"
    ]
  },
  "include": [
    "**/*.ts"
  ]
}

我做了一个单独的项目，并创建了一个简单的打字稿文件。我正在使用独立的 laravel mix 来进行捆绑。webpack.mix.js看起来像这样：

let mix = require('laravel-mix');

mix
    .ts('src/*.ts', 'dist')
    .setPublicPath('dist');

简单的。

我的src/plugin1.ts样子是这样的：

// plugins/src/plugin1.ts

export default function foo() {
    console.log("Foo!");
}

这编译为dist/plugin1.js，看起来像这样：

/******/ (() => { // webpackBootstrap
/******/    "use strict";
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it uses a non-standard name for the exports (exports).
(() => {
var exports = __webpack_exports__;
/*!**********************!*\
  !*** ./src/test1.ts ***!
  \**********************/


Object.defineProperty(exports, "__esModule", ({
  value: true
}));

function foo() {
  console.log("Foo!");
}

exports.default = foo;
})();

/******/ })()
;

好的，现在回到 Obsidian.md 插件。在插件加载功能中，我有以下代码：

console.log(`Importing from: ${test1_path}`);
const im = await import(test1_path);
console.log(im);

哪里const test1_path: string = <the path to plugins/dist/plugin1.js。

因此，我们在控制台中得到以下输出：

Importing from: <the plugin folder>/dist/test1
main.ts:50 {default: {…}}

该im对象如下所示：

{"default":{}}

为什么？

我的foo去哪儿了？

谢谢，

标签： javascripttypescriptecmascript-6