[英]Can we write typescript inside a svelte component?
是否可以在苗條組件的腳本標簽內編寫 Typescript?
我遇到了https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess如果我理解正確,它是一個用於 svelte 的 typescript 預處理器,它允許在 svelte 組件中編寫 typescript。 但是我無法讓它工作
這就是我的匯總配置的樣子
import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
import commonjs from "rollup-plugin-commonjs";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import copy from "rollup-plugin-copy";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";
import {
preprocess,
createEnv,
readConfigFile
} from "@pyoner/svelte-ts-preprocess";
const tsEnv = createEnv();
const compilerOptions = readConfigFile(tsEnv);
const opts = {
env: tsEnv,
compilerOptions: {
...compilerOptions,
allowNonTsExtensions: true
}
};
const env = process.env.NODE_ENV;
const production = env ? env === "production" : false;
const distFolder = "dist";
export default {
input: "src/index.ts",
output: {
sourcemap: !production,
format: "iife",
name: "app",
file: `${distFolder}/bundle.js`
},
plugins: [
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(env)
}),
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(`${distFolder}/bundle.css`);
},
preprocess: preprocess(opts)
}),
// 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/rollup-plugin-commonjs
resolve({
browser: true,
dedupe: importee =>
importee === "svelte" || importee.startsWith("svelte/")
}),
commonjs(),
typescript({
tsconfig: "tsconfig.json",
objectHashIgnoreUnknownHack: true,
clean: production
}),
// Start dev server if not in production mode
!production &&
serve({
open: true,
contentBase: distFolder,
historyApiFallback: true,
host: "localhost",
port: 7000
}),
// Watch the `dist` directory and refresh the
// browser on changes when not in production
!production && livereload(distFolder),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
copy({
targets: [{ src: "public/**/*", dest: `${distFolder}` }]
})
],
watch: {
clearScreen: false
}
};
我不確定我是否配置不正確,或者根本不可能用 svelte 編寫打字稿?
是的。 Svelte 對 typescript 有官方支持! https://svelte.dev/blog/svelte-and-typescript
入門模板帶有 setupTypeScript.js 實用程序: https ://github.com/sveltejs/template#using-typescript
Svelte 有關於 Typescript 支持的官方文檔。
基本上,您可以將lang="ts"
添加到您的腳本塊中,而 svelte 預處理器將負責編譯
<script lang="ts">
export const hello: string = 'world';
</script>
您可以使用普通模板並在執行任何其他操作之前運行node scripts/setupTypeScript.js
來啟動一個新的 Svelte TypeScript 項目:
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
要將 Typescript 添加到現有項目,
npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check
在項目的根目錄添加tsconfig.json
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*", "src/node_modules"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}
如果您使用 Rollup,請將帶有+
的行添加到rollup.config.js
+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript';
export default {
...,
plugins: [
svelte({
+ preprocess: autoPreprocess()
}),
+ typescript({ sourceMap: !production })
]
}
是的,你可以。 這是一個操作方法: 將 TypeScript 與 Svelte / Sapper 一起使用
可以在 svelte 組件的腳本中編寫 ts。 snowpack 、 vite和其他構建工具提供了官方模板。 您還可以使用svelte-preprocess
和 typescript 插件/加載器為各自的構建工具自行構建它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.