使用 Webpack 和 Typescript 从 CDN 导入 ESM 模块

Question

我正在使用一个库，该库仅通过从 CDN 动态导入来提供其功能。用法是这样的：

import LibraryClass from "https://cdn.com/library-url.esm.js";
const libraryInstance = new LibraryClass();

这在一个简单的示例中效果很好，我只是将 vanilla.js 脚本直接加载到 html 页面上。但我需要在使用 Webpack 和 TypeScript 的项目中使用它。如果我尝试构建该项目，则会收到以下错误：

目标环境不支持动态 import() 语法，因此无法在脚本中使用外部类型“模块”

我的 tsconfig 看起来像这样：

 {
  "compilerOptions": {
    "target": "ES2018",
    "module": "esnext",
    "lib": ["es5","es6","dom","dom.iterable","ESNext"] ,
    "allowJs": true ,
    "jsx": "react",
    "declaration": true ,
    "sourceMap": true ,
    "composite": true,                       
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true ,
    "strictPropertyInitialization": false ,
    "moduleResolution": "node",          
    "baseUrl": "./packages",
    "esModuleInterop": true ,
    "allowUmdGlobalAccess": true ,
    "experimentalDecorators": true,
    "preserveConstEnums": true
  }
}

我的 webpack.config 像这样：

{
    entry: './src/index.tsx',
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'bundle.js'
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
      alias: {
        src: path.resolve(__dirname, './src/')
      }
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            // disable type checker - we will use it in fork plugin
            transpileOnly: true
          }
        }
      ]
    },
    externals: {
      three: 'THREE'
    }
   ...
  };

我尝试过不同的组合，但没有成功。任何有关如何使其发挥作用的想法将不胜感激。