Language-tools: 기본적으로 작동하는 typescript + svelte-preprocessor 확인 및 문서화

매력처럼 작동합니다 https://github.com/dummdidumm/template

자바스크립트 버전과의 차이점

• 다음 npm 패키지가 추가되었습니다. svelte-preprocess typescript tslib @rollup/plugin-typescript
• rollup.config.js 개선:

// ...
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

// ...
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess(), // <--
    }),

    // ...
    commonjs(),
    typescript(), // <-- added below commonjs
    // ...

주의 사항:

• 항목 파일( main.js )은 여전히 ​​자바스크립트 파일이어야 합니다.

이것을 시도하고 확인했습니다!

__모든 작업에 감사드립니다!__ 템플릿에 tsconfig.json 파일이 누락된 것 같습니다.

rollup v1.32.1
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
  at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:5400:30)

다음 tsconfig.json 내용 괜찮나요?

{
  "include": ["src/**/*"],
  "exclude": ["node_modules/*"],
  "compilerOptions": {
    "target": "es2017",
    "types": ["svelte"],
    "moduleResolution": "node"
  }
}

rollup v1.32.1
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file '/Users/bgd/Documents/Projects/Essential modules/tsconfig.json'. Specified 'include' paths were '["src/**/*"]' and 'exclude' paths were '["node_modules/*"]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
    at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at emitParsedOptionsErrors (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:310:17)
    at Object.buildStart (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:469:13)
    at /Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:13117:25
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 2)

출처: https://codechips.me/how-to-use-typescript-with-svelte/

재미있네요... tsconfig.json 도 필요없어서 그냥 놔뒀습니다. 나는 그 오류 중 하나를 얻지 못했습니다.

sapper와 함께 사용하려고 하는데 이 오류가 발생했습니다.

$ sapper dev
✗ server
@rollup/plugin-typescript: Couldn't process compiler options
✗ client
@rollup/plugin-typescript: Couldn't process compiler options
internal/modules/cjs/loader.js:584
    throw err;

export const preprocess = sveltePreprocess({
  postcss: true,
  style: sass(),
})

 plugins: [ 
    ...
    ...
    svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess,
      }),

     ...
    ....
     commonjs(),
      typescript(),

템플릿은 IDE가 svelte와 함께 기본적으로 작동한다는 개념 증명으로 의도되었습니다. tsconfig.json 또는 Sapper와 같은 것은 그 당시 제 마음에 없었습니다.
일반적으로 Sapper가 포함된 Typescript는 현재 잘 지원되지 않습니다. @benmccann에 대해 더 알고 있습니까?

Sapper와의 작업이 거의 완료되었습니다. 두 가지 주요 문제가 있습니다.

1. Sapper는 TypeScript와 관련된 오류를 삼킵니다. 이것은 master 에서 수정되었지만 아직 릴리스되지 않았습니다. 그렇기 때문에 "컴파일러 옵션을 처리할 수 없음"만 표시되고 더 유용한 메시지가 표시되지 않을 수 있습니다.
2. 아직 preload 된 템플릿에는 TypeScript를 사용할 수 없습니다. 이 문제를 해결하기 위해 보류 중인 PR이 있습니다: https://github.com/sveltejs/sapper/pull/1222

위의 수정 사항이 병합되어 릴리스될 때까지 TypeScript에서 코딩하는 데 사용할 수 있는 Sapper 포크를 만들었습니다. https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

@dummdidumm 빠른 답변 감사합니다 🙂

불행히도 문제가 지속됩니다.

이것은 내 package.json 파일입니다.

{
  "name": "svelte-app",
  "version": "0.0.1",
  "scripts": {
    "build": "npm install && rollup -c",
    "dev": "npm install && rollup -c -w",
    "start": "sirv public --single",
    "lint": "eslint . --ext .js,.svelte; exit 0",
    "lint-report": "eslint . --ext .js,.svelte -o ./.eslint-report.html -f html; exit 0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "11.0.2",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "@rollup/plugin-typescript": "^4.1.2",
    "eslint": "^7.0.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-svelte3": "^2.7.3",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.8.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "page": "^1.11.6",
    "sirv-cli": "^0.4.4"
  }
}

rollup.config.js 파일:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import autoPreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

const production = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: css => {
        css.write("public/build/bundle.css");
      },
      preprocess: autoPreprocess()
    }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
    commonjs(),
    typescript(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

function serve () {
  let started = false;

  return {
    writeBundle () {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true
        });
      }
    }
  };
}

오류를 직접 재현할 수 없습니다. 그러나 package.json 를 보면 2.x 대신 롤업 1.x 를 사용하는 것 같습니다. 모든 종속성을 최신 버전으로 충돌하면 해결될 수 있습니까?

@dummdidumm 모든 종속성을 최신 버전으로 충돌 tsconfig.json 파일, package-lock.json 파일 및 node_modules 폴더를 삭제했습니다. 문제가 지속됩니다 🤔

에러 메시지:

rollup v2.15.0
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
    at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:213:30)
    at throwPluginError (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:17117:12)
    at Object.error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:17911:24)
    at emitParsedOptionsErrors (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:310:17)
    at Object.buildStart (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:469:13)
    at /Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:18109:25
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 2)
    at Object.rollupInternal (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:19099:9)
    at Task.run (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/watch.js:715:28)

설치된 Svelte VS Code 확장:

• Svelte 3 스니펫 - v0.4.0
• Svelte 베타 - v99.0.41
• 날렵한 Intellisense - v0.7.1

설치된 기타 VS Code 확장:

• 자동 닫기 태그 - v0.5.7
• 브래킷 쌍 Colorizer - v1.0.61
• ESLint - v2.1.5
• 자바스크립트 부스터 - v0.12.3
• 재료 아이콘 테마 - v4.1.0
• 네이티브스크립트 - v0.11.0
• 네이티브스크립트 확장 - v2.11.10
• npm - v0.3.12
• npm 인텔리센스 - v1.3.0
• 경로 Intellisense - v2.2.0
• PHP 인텔레펜스 - v1.4.1
• 나뭇가지 언어 2 - v0.9.1
• 베투르 - v0.24.0

package.json 파일:

{
  "name": "svelte-app",
  "version": "0.0.1",
  "scripts": {
    "build": "npm install && rollup -c",
    "dev": "npm install && rollup -c -w",
    "start": "sirv public --single",
    "lint": "eslint . --ext .js,.svelte; exit 0",
    "lint-report": "eslint . --ext .js,.svelte -o ./.eslint-report.html -f html; exit 0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.0.1",
    "@rollup/plugin-typescript": "^4.1.2",
    "eslint": "^7.2.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-svelte3": "^2.7.3",
    "rollup": "^2.15.0",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-svelte": "^5.2.2",
    "rollup-plugin-terser": "^6.1.0",
    "svelte": "^3.23.1",
    "svelte-preprocess": "^3.9.7",
    "tslib": "^2.0.0",
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "page": "^1.11.6",
    "sirv-cli": "^0.4.6"
  }
}

rollup.config.js 파일:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import autoPreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

const production = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    svelte({
      dev: !production,
      css: css => {
        css.write("public/build/bundle.css");
      },
      preprocess: autoPreprocess()
    }),
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
    commonjs(),
    typescript(),
    !production && serve(),
    !production && livereload("public"),
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

function serve () {
  let started = false;

  return {
    writeBundle () {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true
        });
      }
    }
  };
}

svelte.config.js 파일:

const autoPreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: [
    autoPreprocess()
  ]
};

@elvtcc 저도 같은 문제가 있습니다.

그것을 해결하기 위해 다음이 있습니다.

1. main.js 이 main.ts
2. 그리고 rollup.config.json 에서 input: 'src/main.js' 에서 input: 'src/main.ts' 변경되었습니다.
   (참고: tsconfig.json 도 있어야 합니다)

알고, dummdidumm이 entry file (main.js) has still to be a javascript file 라고 말했지만 작동하지 않습니다.

매우 흥미롭습니다. 이 설정에 여전히 Vodoo가 있는 것 같습니다. 어쨌든 작동하게 되어 기쁩니다! 나는 핵심 svelte repo로 가서 거기에서 공식적인 typescript 템플릿을 만드는 것에 대해 논의할 것입니다.

@AlexandreCantin @elvtcc

repo를 보면 /src 디렉토리( stuff.ts )에 Typescript 파일이 있다는 것을 알 수 있습니다.

같은 오류가 발생했습니다. Typescript에서 소스를 찾을 수 없다고 말했습니다. 위에서 제안한 대로 tsconfig.json 를 사용하여 main.ts 로 변경하려고 시도했지만 번들 코드에서 자동 생성된 이상한 commonjs 모듈 내보내기 exports not found 로 인해 중단되었습니다. 모듈 스타일이 이것을 고칠 것입니다).

작동하는 것은 /src (원하는 경우 tsconfig.json 없이) 안에 empty.ts (또는 모든 파일)을 만든 다음 dev 를 실행하는 것입니다.

편집: 몇 가지 실험 후 작동하는 모든 조합은 다음과 같습니다.

• main.js , tsconfig.json , .ts 내부의 단일 /src
• main.ts , 아니요 tsconfig.json , 앱 가져오기에 ts-ignore 추가:
  
  
  
  • ts // @ts-ignore import App from './App.svelte'
  
  
• main.ts , tsconfig.json 및 다음 중 하나로 설정:

{
  "compilerOptions": {
    "target": "ES2015 (or greater)",
    "module": "ES2015, ES2020, or ESNEXT"
  }
}

@GavinRay97 조사에 감사드립니다! 템플릿을 업데이트했습니다.