我想从 HTML 调用 TypeScript（最终是 JavaScript）函数。问题是我还想使用模块 System（systemjs、commonjs 等）和 webpack。
这是一个例子：
示例.ts：
export class Example {
myFunction() {
alert('Test');
}
}
example2.ts：
export function doSomething() {
alert('Test2');
}
示例.html：
<html>
<head>
<script src="path/to/the/compiled/js/file.js"></script>
<script>
$(document).ready(function() {
$('#test-btn').click(function(){
var example = new Example(); //error1
example.myFunction();
});
});
</script>
</head>
<body>
<button id="test-btn">Click me</button>
<a href="javascript:doSomething()">Click me too</a> <!-- error2 -->
</body>
</html>
错误注释指出错误发生的位置：由于使用了模块 System，因此找不到导出的类/函数。如果我查看编译后的 js 文件，我可以看到类和函数声明被放在一些模块函数中，因此无法从 HTML 访问它们。
目前我正在使用解决方法，将整个
$(document).ready...<a href...所以我的最后一个问题：是否真的可以从 HTML 并使用模块 System 调用 TypeScript 函数/类？
是的。 webpack 有两种支持方式
1）使用library选项输出。这会将入口文件的导出写入您选择的全局范围内的命名空间变量
myEntryFile.ts
import {Example} from './example'
import {doSomething} from './example2'
export {
Example,
doSomething
}
webpack.config.js
output: {
//... your normal output config her
library: 'MyExposedNamespace'
}
现在可以在
window.MyExposedNamespacewindow.MyExposedNamespace.doSomething()
const myExample = new window.MyExposedNamespace.Example()
对于更高级的用法，您还可以通过 libraryTarget 更改命名空间应用的范围，这样就不会污染全局范围
2）使用expose-loader
webpack.config.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'
然后可以通过全局范围调用这些（在浏览器中这当然是
windowwindow.doSomeThing()
const myExample = new window.Example()
这可能会变得更加棘手，因为在公开之前还需要进行打字稿转译步骤，这取决于您的其他配置，可能会比上面的简单版本更复杂
因此我推荐第一个解决方案作为最简单的
查看此存储库中的另一个解决方案：此处