使用模块系统从HTML调用typescript函数

对webpack有两种支持此功能的方法

1) 输出使用 library 选项这将把入口文件的导出写入所选全局范围内的命名空间变量

myEntryFile。ts

import {Example} from './example'
import {doSomething} from './example2'

export {
  Example,
  doSomething
}

网页包。配置。js公司

output: {
  //... your normal output config her
  library: 'MyExposedNamespace'
}

现在可以在 window.MyExposedNamespace

window.MyExposedNamespace.doSomething()
const myExample = new window.MyExposedNamespace.Example()

要获得更高级的使用,还可以通过以下方式更改命名空间应用于的范围 libraryTarget 所以不会污染全球范围

2) 使用 expose-loader

网页包。配置。js公司

module: {
  rules: [
    { test: /example\.ts$/, 
      use: [
       { loader: 'expose-loader', options: 'Example'},
       'awesome-typescript-loader' // must transpile as file is typescript
      ]
    },
    { test: /example2\.ts$/, 
      use: [
        { loader: 'expose-loader', options: 'doSomeThing'},
        'awesome-typescript-loader'
      ]
    }
  ]
}

您还必须记住将这些文件导入项目中的某个位置,否则webpack将忽略它们。您不必实际使用它们,它只是用于webpack跟踪依赖项。最符合逻辑的地方是您的条目文件

myEntryFile。ts

import './example'
import './example2'

然后可以通过全局作用域调用它们(在浏览器中,这当然是 window )

window.doSomeThing()
const myExample = new window.Example()

这一步可能会变得更加棘手,因为typescript转换步骤也需要在公开之前进行,这取决于您的其他配置,可能会比上面的简单版本更加复杂

因此,我建议第一种解决方案是最简单的