공식 핸드북에 따라 모듈을 구현하려고 하면이 오류 메시지가 표시됩니다.

포착되지 않은 ReferenceError : 내보내기가 정의되지 않았습니다.

app.js : 2에서

그러나 내 코드 어디에도 이름을 사용하지 않습니다 exports.

이 문제를 어떻게 해결할 수 있습니까?

파일

app.ts

let a = 2;
let b:number = 3;

import Person = require ('./mods/module-1');

module-1.t

 export class Person {
  constructor(){
    console.log('Person Class');
  }
}
export default Person;

tsconfig.json

{
   "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "scripts/"
    },
    "exclude": [
        "node_modules"
    ]
}

답변

편집하다:

이 답변은 es5더 이상 타겟팅 하지 않으면 작동하지 않을 수 있으므로 답변을 더 완벽하게 만들려고 노력할 것입니다.

원래 답변

CommonJS가 설치되어 있지 않은 경우 ( 정의exports ) 다음 행을 제거해야합니다 tsconfig.json.

 "module": "commonjs",

의견에 따르면 이것만으로는 이후 버전에서 작동하지 않을 수 있습니다 tsc. 이 경우 CommonJS, SystemJS 또는 RequireJS와 같은 모듈 로더를 설치 한 다음 지정할 수 있습니다.

노트 :

생성 된 main.js파일을 보십시오 tsc. 이것은 맨 위에 있습니다.

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

오류 메시지의 근원 "module": "commonjs",이며을 제거한 후에 는 사라집니다.

답변

이 문제에 대한 몇 가지 다른 해결책

Javascript에 대한 다른 참조 앞에 다음 행을 추가하십시오. 이것은 멋진 작은 해킹입니다.

   <script>var exports = {};</script>

이 문제는 최신 버전의 TypeScript에서 발생합니다.이 오류는 typescript 버전 2.1.6을 참조하여 제거 할 수 있습니다.

답변

npm install @babel/plugin-transform-modules-commonjs

.babelrc 플러그인에 추가하면 내 질문이 해결되었습니다.

답변

내 솔루션은 내가 추가 한 작은 트릭으로 위의 모든 것을 요약 한 것입니다. 기본적으로 이것을 내 HTML 코드에 추가했습니다.

<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>

이것은 심지어 당신이 전자 또는 무언가 를 사용하는 import대신 사용할 수 있도록 허용 require하며 typescript 3.5.1, target : es3-> esnext에서 잘 작동합니다.

답변

"type": "module"에서 필드를 제거하여 문제를 해결했습니다 package.json.

답변

같은 문제가 발생 하여 다음과 같이 tsconfig.json에 ” es5 “라이브러리를 추가하여 해결했습니다 .

{
    "compilerOptions": {
        "target": "es5", //defines what sort of code ts generates, es5 because it's what most browsers currently UNDERSTANDS.
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true, //for angular to be able to use metadata we specify in our components.
        "experimentalDecorators": true, //angular needs decorators like @Component, @Injectable, etc.
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [
            "es2016",
            "dom",
            "es5"
        ]
    }
}

답변

여전히이 문제가있는 사람들을 위해 컴파일러 대상이 ES6으로 설정되어 있으면 babel에게 모듈 변환을 건너 뛰도록 지시해야합니다. 이렇게하려면 .babelrc파일에 추가하세요.

{
  "presets": [ ["env", {"modules": false} ]]
}