所以我有一个Svelte应用程序与TypeScript启用，但现在我有一个问题，运行它:
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
srcapi.ts (4:7)
2:
3: export default class API {
4: url:string;
^
5:
我不明白，因为应用程序之前是工作的，突然提出了这个错误。Svelte中与TypeScript相关的一些版本似乎发生了变化:
{
"name": "...",
"version": "...",
"private": ...,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear",
"validate": "svelte-check",
"check": "svelte-check --tsconfig ./tsconfig.json" /* + ADDED */
},
"devDependencies": {
"@rollup/plugin-commonjs": "...",
"@rollup/plugin-json": "...",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-typescript": "^8.0.0",
/* @smui/... stuffs */
"@tsconfig/svelte": "^2.0.0", /* ^1.0.0 -> ^2.0.0 */
"rollup": "^2.67.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.46.3",
"svelte-check": "^2.0.0", /* ^1.0.0 -> ^2.0.0 */
"svelte-preprocess": "^4.0.0",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"dependencies": {
"sirv-cli": "^2.0.2",
"svelte-material-ui": "..."
}
}
/* Note: I replaced some unrelated properties/version by '...'. */
当然执行npm install没有帮助。如果我只是删除:string，它将抛出代码中所有其他:<type>相同的错误。
请注意，该文件名为.ts，并且VSCode在这些文件中没有检测到任何语法错误。
配置文件(编辑)
/* tsconfig.json */
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}
/* rollup.config.js */
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
dev: !production
}
}),
css({ output: 'bundle.css' }),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production
}),
json(),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
No filesvelte.config.js
在启用了Typescript的最新svelte模板中设置了我的项目后，遇到了类似的"意外标记";当尝试将类型导入.svelte文件时，不是在代码编辑器中，而是在服务器中。
修复是显式地将svelte.config.js中的预处理选项设置为vitePreprocess()。这是出乎意料的，因为苗条文档(目前)声明，如果在安装过程中启用Typescript，默认情况下会包含这个!https://kit.svelte.dev/docs/integrations预处理器
import { vitePreprocess } from '@sveltejs/kit/vite';
export default {
preprocess: [vitePreprocess()]
};
对我来说，似乎我只需要在<script>标签中指定lang属性为"ts"。
<script>
...
</script>
<script lang="ts">
...
</script>
所以，我试着在docker容器中执行我的应用程序，看看它是否会工作，并得到一个不同的错误信息，更有帮助:
[!] Error: Could not resolve './api.js' from src/App.js`
实际上，文件不是命名为./api.js，而是命名为./API.ts(忘记将其重命名为TS后更改导入…)
所以我这样改变了导入:
/* Before (not working) */
import API from './api.js'
/* After (Good) */
import API from './API'
// NB. The filename is really in uppercase for me
TL;博士
- 检查任何
import x from file.js的导入，它应该是一个TS文件，并将它们替换为import x from file(你不应该写.ts扩展名)
解释:
它试图导入一个JavaScript (.js)文件，但是找到了TypeScript文件(.ts)并导入它(似乎它只关心"basename")，但是没有TypeScript支持，造成了这个奇怪的情况，它不识别.ts文件中的TypeScript语法。