json 파일을 컴파일하도록 typescript에 지시하다

json 파일을 컴파일하도록 typescript에 지시하다

를 사용하여 json 파일을 Import하면 typescript 컴파일러가 정상적으로 동작합니다.

const tasks = require('./tasks.json')

, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★tsc에는, 「no」는 되어 있지 않습니다.tasks.json실행 시 오류가 발생하고 있습니다.

파일을 방법이 ?아니면 모든 json 파일을 수동으로 복사/붙여넣어야 합니까?dist디렉토리?

my tsc compiler Options 현재 읽기

  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "noImplicitAny": true,
    "removeComments": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "pretty": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "sourceMap": true
  },

감사합니다!

문제

JSON 파일을 모두 복사하고 싶은 분들에게 TypeScript는 매우 어렵습니다.와 함께라도"resolveJsonModule": true,tsc은 「」뿐입니다..json에 의해 직접 참조되는 파일import.

다음은 동적 런타임을 수행하려는 코드 예시입니다.require()은, JSON 이 「JSON」, 「JSON」에되어 있는 dist/( 「」, 「」)tsc 거부합니다.

// Works
import * as config from './config.default.json';

const env = process.env.NODE_ENV || 'development';

const envConfigFile = `./config.${env}.json`;

// Does not work, because the file was not copied over
if (fs.existsSync(envConfigFile)) {
  const envConfig = require(envConfigFile);
  Object.assign(config, envConfig);
}

해결책 1: json 파일을 src 트리 외부에 보관합니다(권장).

「 」가 있는 /src/ ★★★★★★★★★★★★★★★★★」/dist/JSON에 보관할 수 ./은 '하다'에 있는 대본입니다./src/config/load-config.ts실행 시 이 작업을 수행할 수 있습니다.

const envConfig = require(`../../config.${env}.json`);

// Or you could read manually without using require
const envConfigFile = path.join(__dirname, '..', '..', `config.${env}.json`);
const envConfig = JSON.parse(fs.readFileSync(envConfigFile, 'utf-8'));

이것이 가장 간단한 해결책입니다.필요한 설정 파일이 실가동 환경에 배치되어 있는지 확인하기만 하면 됩니다.

로 「」에합니다.src/및 는 ""에되도록 합니다.dist/더입니니다다

해결책 2: 가능한 모든 파일을 수동으로 Import

위의 예에서는 다음을 수행할 수 있습니다.

import * as config from './config.default.json';
import * as testingConfig from './config.testing.json';
import * as stagingConfig from './config.staging.json';
import * as productionConfig from './config.production.json';

이 "" 에 됩니다.dist/ 저희 'folder'는require()이제 작동해야 합니다.

추가가 : 새로운 추가가 필요한 경우.json수입선

해결책 3: tsc-hooks 플러그인을 사용하여 json 파일을 복사합니다(권장).

플러그인을 사용하면 모든 파일을 src 트리에서 dist 트리로 복사하고 선택적으로 일부 파일을 제외할 수 있습니다.

// Install it into your project
$ yarn add tsc-hooks --dev

// Configure your tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist"
  },
  // This tells tsc to run the hook during/after building
  "hooks": [ "copy-files" ]
  // Process everything except .txt files
  "include": [ "src/**/*" ],
  "exclude": [ "src/**/*.txt" ],
  // Alternatively, process only the specified filetypes
  "include": [ "src/**/*.{ts,js,json}" ],
}

여기에 tsc-hooks가 공지되어 있더군요.

해결책 4: npm 빌드 스크립트를 사용하여 json 파일을 복사합니다(권장).

★★의 앞tsc-hooksnpm 빌드 프로세스에 또는 스텝을 추가하여 모두 복사할 수 있습니다..json을 「」에 격납합니다.dist/, '' 뒤에, ''tsc을 사용하다

이 ''를 '빌드'로 하는 을 가정합니다.npm run build뭐 비슷한 거.

예를 들어 다음과 같습니다.

$ npm install --save-dev cpy-cli

// To copy just the json files, add this to package.json
"postbuild": "cpy --cwd=src --parents '**/*.json' ../dist/",

// Or to copy everything except TypeScript files
"postbuild": "cpy --cwd=src --parents '**/*' '!**/*.ts' ../dist/",

, 이제npm run build 한다tsc 후 를 실행합니다cpy.

: 추가 필요.devDependency빌드 프로세스에서 이 부분을 사용해야 합니다.

해결책 5: json 파일 대신 js 파일 사용

'어느 쪽이든'을 사용하지 마세요..json파일로 이동합니다. 일을이이이이.js 「」를 유효하게 합니다."allowJs": true 안에서tsconfig.json .그리고나서tsc파일이 복사됩니다.

★★★★★★★★★★★★★★★★★★★★★★★★」.js 합니다.module.exports = { ... };

나는 이 아이디어가 여기서 추천된다는 것을 알았다.

「」를 유효하게 : 「」를 유효하게 합니다."allowJs": true추가가 필요할 수도 있습니다."esModuleInterop": true ★★★★★★★★★★★★★★★★★」"declaration": false, 심지어."skipLibCheck": true에 따라 . 기존 설정에 따라 다릅니다.

또 다른 문제가 있습니다(테스트를 하지 않아 죄송합니다).

• tsc모든 파일이 다른 파일에 의해 정적으로 참조되지 않는 경우 구성 파일을 transfile 할 수 있습니까?는 파일 또는 할 수 .files ★★★★★★★★★★★★★★★★★」include의 tsconfig.json.

솔루션 6: json 파일 대신 ts 파일 사용

간단해 보이지만 고려해야 할 몇 가지 문제가 있습니다.

• 설정 파일은 다음과 같습니다.const config = { ... }; export default config;

• 의 「 」에 대해서는, 「 」를해 주세요.filesinclude★★★★★★★★★★★★★★★★★★.

• 시 설정 은 """로 변환됩니다로 됩니다..js 그러니 가지 마세요.require() .ts!!이 !!!!!!!!!!

• 는, 설정 을 실시할 필요가 있습니다.tsc'빌드라... ''로 을 할 수 거야 그들은 전사로 해킹을 할 수 있어요..js 파일dist그러나 나중에 빌드가 변경 내용을 덮어쓸 수 있으므로 이 작업은 피해야 합니다.

테스트

이것을 실험할 때는, 반드시, 다음의 정보를 클리어 해 주세요.dist/와 ""tsconfig.tsbuildinfo프로세스를 적절하게 테스트하기 위해 빌드 간에 파일을 작성합니다.

)tsc 청소하는 .dist/을 사용하다따라서 이러한 파일을 삭제하지 않으면 이전 실험에서 남겨진 오래된 파일이 잘못된 결과를 초래할 수 있습니다.

tsconfig.json에서 추가

{
  "compilerOptions": {
     "resolveJsonModule": true,
   },
   "include": [
     "src/config/*.json"
  ]
}

복사되지 않는다는 점에 유의하십시오.json:require d를 로 하는 . 동적으로 필요한 경우json.dist 예를 '어울리다'에서 '어울리다'로 가 있어요

return require("some.json") as YourType

로.

return (await import("some.json")) as YourType

.

typescript 2.9+에서는 JSON 파일을 직접 사용할 수 있으며 자동으로 dist 디렉토리에 복사됩니다.

은 것은입니다.tsconfig.json「CHANGE MARGE:」

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop"             : true,
        "module"                      : "commonjs",
        "outDir"                      : "./dist",
        "resolveJsonModule"           : true,
        "target"                      : "es6"
    },
    "exclude"        : [
        "node_modules"
    ]
}

그런 다음 json 파일을 생성할 수 있습니다.

{
    "address": "127.0.0.1",
    "port"   : 8080
}

사용 예:

import config from './config.json';

class Main {

    public someMethod(): void {
        console.log(config.port);
    }
}

new Main().someMethod();

★★★★★★★★★★★★★★★를 사용하지 않는 경우는esModuleInterop기본 필드에 캡슐화된 json 속성에 액세스해야 합니다. config.default.port.

를 사용하여 json 파일을 Import하면 typescript 컴파일러가 정상적으로 동작합니다.

const tasks = require('./tasks.json')

TypeScript가 한 require()정의된 함수(예: 를 사용).vanilla 셋업에서는 정의되지 않은 컴파일 오류가 발생합니다.

TypeScript에 TypeScript에 대해require할 뿐,그것을 컴파일러가 하도록 하는 것은 즉, 가 필요로 하는 함수는 아니다)."tasks.json"그 파일을 사용하여 어떤 작업도 수행합니다.이것은 Browserify 또는 Webpack과 같은 도구의 작업이며 코드 베이스를 해석할 수 있습니다.require모든 것(JS, CSS, JSON, 이미지 등)을 런타임 번들에 로드하여 배포합니다.

조금 더 나아가 TypeScript 2.0에서는 Wildcard()* 모듈 이름 선언을 사용하여 번들러(Browserify 또는 Webpack)에 의해 해결 및 로드되는 모듈 경로 패턴을 TypeScript 컴파일러에 알릴 수도 있습니다.

declare module "*.json" {
    const value: any;
    export default value;
}

이제 ES6 모듈 구문을 사용하여 TypeScript에서 JSON을 Import할 수 있습니다.

import tasks from "./tasks.json";

하지 않고 컴파일 오류가 발생하며 컴파일 오류가 하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생하거나 컴파일 오류가 발생할 수 .var tasks = require("./tasks.json")는 '번들러'를 됩니다requireJSON 콘텐츠를 포함한 번들을 구축합니다.

스크립트에 수 .&& ncp src/res build/res

언제든지 타이프 스크립트 코드를 사용하여 프로젝트에 대한 절대 경로를 얻을 수 있습니다. 위해서는 JSON 파일이 .required를 합니다.fs에서 경로 사용process.cwd(): typescript " " " " 。

import * as fs from 'fs';

const task: any = JSON.parse(fs.readFileSync(`${process.cwd()}/tasks.json`).toString());

를 '실행하다'로 해야 할 수 있습니다.node dist/src/index.js서 기 where where where where 、 서 where where where where 。dist더입니니다다

언급URL : https://stackoverflow.com/questions/40471152/tell-typescript-to-compile-json-files