Question

我想从HTML调用TypeScript（ultimetely JavaScript）函数。问题是我还想使用模块系统（systemjs，commonjs等）以及webpack。

以下是一个例子：

example.ts：

export class Example {
    myFunction() {
        alert('Test');
    }
}

example2.ts：

export function doSomething() {
    alert('Test2');
}

example.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>

错误注释指示错误发生的位置：找不到导出的类/函数，因为使用了模块系统。如果我查看已编译的js文件，我可以看到类和函数声明放在某些模块函数中，因此无法从HTML访问它们。

目前，我通过将整个$(document).ready...部分移动到TypeScript文件中来使用解决方法。但对于<a href...示例，我没有任何解决方法。

所以我的最后一个问题：是否可以从HTML调用TypeScript函数/类并使用模块系统？

Answer 1

是。 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.MyExposedNamespace

上找到

window.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'

然后可以通过全局范围调用它们（在浏览器中这当然是window）

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

这个可能会变得更加棘手，因为打字之前需要进行打字输出步骤，这取决于你的其他配置，可能比上面的简单版本更复杂

因此我建议将第一个解决方案作为最简单的

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

1 个答案: