svelte 的第一次嘗試

• Svelte
• Svelte Webpack Starter
• Integrating TypeScript with Svelte
• Svelte with Webpack 5 and Babel
• How to set up style loader and css loader with webpack, to include CSS style files when building your JS app
• TypeScript support in Svelte

我今年 project 配置都是：webpack, babel, typescript. 現在想嘗試多加上一個 svelte, 結果就不太順利了。

Svelte 也有人教配合 typescript 的，那些專案大部份都配上 rollup (就是要趕快學新東西了) 。如果要用到 webpack 的，照目前查到的教學來說，都少一點東西，而且 8/11 裝了好像會卡住... 不過重頭直接裝 webpack + babel + svelte 又有成功。

8/12 重試一次，以 Integrating TypeScript with Svelte 這一篇講的為主。我照舊的配置從 webpack, babel, typescript 裝起，接著裝了 svelte, svelte-loader, svelte-preprocess.

tsconfig 我用原本的配置，然後建了 "typings" 資料夾，底下放了 "index.d.ts" (現在想想是不是以後每多一個 src 檔都要建一個 .d.ts 啊?)

webpack.config.js 裡新增一段用 "svelte-loader" 讀檔案的。

// index.d.ts
declare module '*.svelte' {
  const value: any;
  export default value;
}

// index.ts
import App from './App.svelte';
import './custom.scss';

ready(() => {
  console.log('DOM is ready.');

  const app = new App({
    target: document.querySelector('div.from-app'),
    props: {},
  });
});

// App.svelte
<script>
  import Helper from './Helper.svelte';
</script>

<h1>Hello World</h1>

<Helper val={3} />

// Helper.svelte
<script lang="ts">
  let val: number;
</script>

<h1>Temp {val}</h1>

跟著文章建立到這邊， build 檔案後上傳可以看到正確的結果，只是有以下問題：

1. 在 index.d.ts 裡， export default value -> "Duplicate identifier 'default'.ts(2300)"
2. 在 index.ts 裡， import app from './app.svelte' -> "Cannot find module './app.svelte' or its corresponding type declarations.ts(2307)"
3. 在 App.svelte 裡， <Helper val={'3'} /> -> "'Helper' is not defined.svelte(missing-declaration)" 可是我上面才寫了 import 啊...

用 svelte-check 會有一個錯誤，"Error: Type '{ val: number; }' is not assignable to type 'IntrinsicAttributes'. Property 'val' does not exist on type 'IntrinsicAttributes'. (ts)

寫到這裡 8/13 16:07 發現卡住了，先暫停整理一下...

8/16 17:23 更新一下研究，我最上面三個問題，都跟 tsconfig 有關

在我原先的設定裡，我只寫 "include: ['./src']" 結果把 node_modules 裡面的 "src" 也包進來了。就算同時列了 "exclude: ['./node_modules']" 和 "include: ['./src']" 也會抓到 node_modules 裡面，這樣會有 "Duplicate identifier 'default'.ts(2300)" 的錯誤 (真的有一樣 export)

再來是明明有 import 可是卻不認得的事，我原先的 tsconfig 是 init 自動產生的，所以沒有改過 target (ES5), module(commonjs). 現在發現 module === commonjs 就會有 import 的錯誤。

最後 not assignable to type 'IntrinsicAttributes' 的錯誤今天都沒看到，就不管他了。