为什么typescript会生成chrome不支持的javascript'；你不接受吗？_Javascript_Typescript_Google Chrome

为什么typescript会生成chrome不支持的javascript'；你不接受吗？

javascript typescript google-chrome

为什么typescript会生成chrome不支持的javascript'；你不接受吗？,javascript,typescript,google-chrome,Javascript,Typescript,Google Chrome,我想我一定是在打字稿中遗漏了一些非常基本的东西。我使用tsc编译两个.ts文件，它们都引用另一个.ts模块。对于生成的.js，我从chrome中得到两个错误没有定义需求标识符“util_1”已声明玩具的例子，再现了下面的问题文件夹结构为html和html/js html包含index.html html/js有file1.{ts，js}file2.{ts，js}util.{ts，js} html/index.html是 <!DOCTYPE html> <html>

我想我一定是在打字稿中遗漏了一些非常基本的东西。我使用tsc编译两个.ts文件，它们都引用另一个.ts模块。对于生成的.js，我从chrome中得到两个错误

没有定义需求

标识符“util_1”已声明

玩具的例子，再现了下面的问题

文件夹结构为html和html/js

html包含index.html

html/js有file1.{ts，js}file2.{ts，js}util.{ts，js}

html/index.html是

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>This is the title</title> 
</head> 
 
<body> 
    <!-- Main Page --> 
    <h1>This is a header</h1> 
    <p>Hello, world 
      <!--- work around exports undefined error ---> 
    <script>var exports = {}</script> 
 
    <script src="js/file1.js"></script> 
    <script src="js/file2.js"></script> 
</body>

file2.ts是

import {L} from './util' 
L("I am file2")

util.ts是

export function L(x:any) {console.log( x)}

生成的.js结果是 file1.js

file2.js

"use strict"; 
Object.defineProperty(exports, "__esModule", { value: true }); 
const util_1 = require("./util"); 
util_1.L("I am file2");

和util.js

"use strict"; 
Object.defineProperty(exports, "__esModule", { value: true }); 
exports.L = void 0; 
function L(x) { console.log(x); } 
exports.L = L;

注意两个.js文件中的const util_1的双重定义，以及浏览器不喜欢的require。我做错了什么

在注释后添加：我应该包括tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
      "lib": ["es5","es6","es7",
          "es2015","es2016",
          "es2017","es2018","es2019","dom" ], /* Specify library files to be included in the compilation. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

您在

tsconfig.json

中的设置很可能不适用于浏览器上下文。请参阅本指南，了解一个好的起点：

您在

tsconfig.json

中的设置很可能不适用于浏览器上下文。请参阅本指南，了解一个良好的起点：

我猜

目标

是否设置为节点？编译器正在将ES2015

导入

和

导出

转换为老式的

要求

语法，而浏览器本机不支持这些语法。您的Typescript设置需要调整。这可能会有所帮助：我猜

target

设置为node？编译器正在将您的ES2015

import

和

export

转换为老式的

require

语法，浏览器本机不支持这种语法。您的Typescript设置需要调整。这可能有助于：

"use strict"; 
Object.defineProperty(exports, "__esModule", { value: true }); 
exports.L = void 0; 
function L(x) { console.log(x); } 
exports.L = L;

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
      "lib": ["es5","es6","es7",
          "es2015","es2016",
          "es2017","es2018","es2019","dom" ], /* Specify library files to be included in the compilation. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}