javascript - 我们可以在一个苗条的组件中编写打字稿吗?
问题描述
是否可以在苗条组件的脚本标签内编写 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
目前它不能与 eslint 结合使用,但正在开发中
推荐阅读
- php - 设置 Composer / 自动加载我的类的问题
- android - 使用 MathJax 进行 WebView 渲染非常慢
- javascript - For Each 循环中的多个 Mongoose 调用
- python - 如何在python中通过用户输入调用函数?
- hive - Hive 解释计划在哪里查看全表扫描?
- windows-console - python 控制台上的“选择”一词代表什么?
- c++ - C ++无法在列表迭代后使用插入附加值
- azure - 在公司代理网络中的 WebAPI 中运行时 ADAL [AquireTokenAsync] 超时
- rust - 在 Substrate 运行时 crate 中定义的 Log 类型在哪里?
- java - 在输出中输入特定日期时,我收到“null”