TypeScript -防止插入魔法代码-如何?

Question

我对TypeScript非常陌生(所以请原谅)，但我一直无法弄清楚如何阻止TypeScript添加看似"魔术"的东西。

每当我使用"tsc"时，没有报告错误，但是Typescript在javascript文件的最后一行追加了以下内容:

export {};

…当Javascript文件被执行时(在浏览器中加载)，这会导致控制台报告以下错误:

Uncaught SyntaxError: Unexpected token 'export'

tsconfig中的编译器选项。json是:

"compilerOptions": {
"target": "ES2015",
"removeComments": false,
"noImplicitAny": true,
"noImplicitThis": true,
"moduleResolution": "Node"
},

然后尝试将编译器选项更改为以下内容:

"compilerOptions": {
"target": "ES2015",
"module":"CommonJS",
"removeComments": false,
"noImplicitAny": true,
"noImplicitThis": true,
"moduleResolution": "Node"
},

成功-导出行不再存在，但是现在，下面的行被添加到javascript文件的顶部!:

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

…当Javascript文件执行时(在浏览器中加载)，控制台会报告以下错误:

Uncaught ReferenceError: exports is not defined

我还试图改变脚本标签，加载由tsc产生的javascript使用type="module"，即:

<script type="module" src="file_produced_by_tsc.js"></script>

…本地加载时，控制台显示:

访问脚本在'file:///…' from origin 'null'已被CORS策略阻止:跨域请求仅支持协议方案:http, data, chrome, chrome-extension, chrome-untrusted, https。

Access to script at 'file:///...' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Failed to load resource: net::ERR_FAILED

显然，浏览器告诉我脚本不能在本地加载，但我通常这样做我的JS调试。这将是一个皇家痛苦，不得不上传脚本只是从网络资源加载它!

好悲伤-我想要的是Javascript代码没有任何"魔法代码"补充道。编译器选项，如:

"excludeMagicCode": true

…太理想了!

显然，我错过了一些非常基本的东西;是否有一个编译器选项，可以防止这些神奇的代码语句乱扔产生的Javascript?

提前感谢。

Answer 1

通过添加"module":"CommonJS"，你告诉TypeScript生成类似node .js的JavaScript，它在执行时从其包装函数参数中传递属性，例如exports(因此它添加了期望它的代码)。

默认情况下，TypeScript生成的JavaScript是EcmaScript6-module兼容的然而默认情况下，HTMLscript标签不会尝试读取模块化JavaScript。在删除模块配置设置并重新构建之后，您可以尝试的一件事是在HTML中显式地添加具有module值的type属性:

<script type="module" src="./ts-build-example.js"></script>

这将允许脚本在大多数现代浏览器中接受和运行export(和import)语句。

Answer 2

在做了更多的研究和阅读关于这个类似的问题之后，tsc似乎正在做它的工作，但真正的问题(对我来说)是使用(加载)本地生成的Javascript;这是不可能的。

由于我使用Visual Studio Code，我在项目文件夹中创建了一个Powershell脚本(fix_files.ps1)，以从Javascript tsc产生的导出语句中删除:

#
# Remove all lines from the given file that start
# with the given string ...
#
function remove_lines( [string]$file_spec, [string]$remove_str="export {" ) {
#
# A file spec is required ...
#
if ( [String]::IsNullOrEmpty( $file_spec ) ) {
Write-Output "* File specification is required"
return
}
#
# String to remove is required ...
#

if ( [String]::IsNullOrEmpty( $remove_str ) ) {
Write-Output "* String to remvoe is required"
return
}
#
# Exit if file not found ...
#

if ( -not [System.IO.File]::Exists( $file_spec ) ) {
Write-Output "* File not found: $file_spec"
return
}
#
# Count the number of lines that start with the given string
# and if any are found, remove those lines from the file ...
#
$line_count = Get-Content $file_spec | Where { $_.StartsWith( $remove_str ) } | Measure-Object
if ( $line_count.Count -gt 0 ) {
(get-content $file_spec) | Where { -not $_.StartsWith( $remove_str ) } | Set-Content $file_spec
}
Write-Output "- $file_spec, lines removed: $($line_count.Count)"
}
#
# Fix files ...
#
Write-Output "Fixing Javascript files:"
remove_lines( "file1.js" )
remove_lines( "file2.js" )

使用Visual Studio Code中的终端，我运行以下命令:

> tsc
> .fix_files.ps1

不是很优雅，但至少它允许我在本地开发，而不需要模块捆绑器或设置本地web主机。