순수한 TypeScript 프로젝트에서 "ReferenceError: exports is not defined"를 수정하는 방법은 무엇입니까?

순수한 TypeScript 프로젝트에서 "ReferenceError: exports is not defined"를 수정하는 방법은 무엇입니까?

가져오기 또는 내보내기 명령과 함께 .ts를 작성하면 HTML 페이지에 로드될 때 결과 .js가 다음 오류를 생성합니다. "ReferenceError: exports is not defined"

재생산 방법:

1. VS에서 빈 노드.js 웹 애플리케이션 프로젝트 생성
2. 가져오기 또는 내보내기 줄로 .ts 추가
3. 결과 .js를 호출하는 HTML을 추가합니다.
4. HTTP 서버를 시작합니다.http-server -g [port]) 그리고 HTML에 도달합니다.

노력했습니다.

• 대상 ES5
• 라인 제거"module": "commonjs"tsconfig.json'에서
• CommonJS 및 시스템 설치제이에스
• 를 사용하여 .ts 컴파일tsc
• Stack Overflow에 유사한 질문이 있는 다른 솔루션
• 위의 모든 가능한 순열.

my .ts(가져오기 명령이 있는 경우 아무 것이나 될 수 있음):

import { setTimeout } from "timers";
setTimeout(() => console.log("asdf"), 1000);

HTML에는 스크립트를 참조하는 간단한 본문이 있습니다.

package.json

{
  "name": "nodejs-web-app4",
  "version": "0.0.0",
  "description": "NodejsWebApp4",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "devDependencies": {
    "@types/node": "^8.0.14"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

결과 .js:

VS 빌드에서(결과:ReferenceError: exports is not defined):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const timers_1 = require("timers");
timers_1.setTimeout(() => console.log("asdf"), 1000);
//# sourceMappingURL=home-script.js.map

From 명령tsc [filename].ts(에 포함됨.ReferenceError: exports is not defined):

"use strict";
exports.__esModule = true;
var timers_1 = require("timers");
timers_1.setTimeout(function () { return console.log("asdf"); }, 1000);

VS 빌드에서 시작하지만 제거"module": "commonjs"tsconfig에서(에 포함됨)SyntaxError: import declarations may only appear at top level of a module):

import { setTimeout } from "timers";
setTimeout(() => console.log("asdf"), 1000);
//# sourceMappingURL=asdf.js.map

모든 HTML 및 t는 "static"(MVC 없음)으로 호출됩니다.

사용하는 것이 잘못되었습니까?http-serverVS 프로젝트에서 정적 HTML을 볼 수 있습니까?그게 문제입니까?

다른 방법을 만들어야 합니까?다른 설정을 사용하시겠습니까?

해결 방법(예: 필요한 모든 것을 동일한 TypeScript 파일에 보관)이 있지만 Node/TS로 간단한 프로젝트를 만들고 시각화할 수 없다는 점이 혼란스럽습니다.

브라우저는 commonjs 모듈을 지원하지 않습니다.컴파일 후 모듈을 번들로 제공하려면 일부 도구(웹 팩, 롤업, 브라우저화)를 사용해야 합니다.

tsconfig.json에서 모듈 옵션을 제거하거나 es2015 또는 esnext로 설정한 경우 가져오기 및 내보내기 문은 원래 파일에 그대로 유지됩니다.

import { foo } from './bar.js';

export default class Baz {}

일부 브라우저는 이미 네이티브 ES 모듈을 지원하지만 스크립트 태그에 유형 특성을 추가하고 모듈로 설정해야 하기 때문에 작동할 수 있습니다.

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

그렇지 않으면 'SyntaxError: 가져오기 선언이 모듈의 최상위 수준에만 나타날 수 있습니다'와 같은 오류가 발생합니다.

언급URL : https://stackoverflow.com/questions/54670544/how-to-fix-referenceerror-exports-is-not-defined-in-a-pure-typescript-project