Svelte Ie11 Boilerplate Ts Scss

ru-museum

svelte-template for IE11, TypeScript and SCSS

svelte-ie11-boilerplate-ts-scss

svelte-template for IE11, TypeScript and SCSS(SASS)
IE11、TypeScript 及び SCSS(SASS) の為のテンプレート

[ 注意 ]
※ 元となる sveltejs/template は既に更新が止まり Public Archive となり vite への移行が促されていますのでご注意下さい。
※ 当版は svelte5 へのアップグレードにおいて「表示エラー」となりますので 4.2.19 で固定されています。
※ Typescript は依存関係の為 5.9.3 に固定されています。
※ 他のプログラムはバージョンアップされ正常に動作しています（確認：2026/04/13）。

特徴

svelte5 へのアップグレードはエラーの為 svelte v4.2.19 で固定されています（2026-04-15）。
この Svelte apps は https://github.com/sveltejs/template に基づいています。
特にbuild 後サーバーに依存せず standalone での起動が可能です。
TypeScript 及び SCSS(SASS) を使用する為のテンプレートです。
※ TypeScript は添付のスクリプト（setupTypeScript.js）に依り導入されています。
※ TypeScript は "svelte-preprocess" の依存関係で 5.9.3 ( latest: 6.0.2 )に固定されています。
特に IE11 に対応するためのものです(バージョン 11.1087.16299.0 で確認)。
※ 詳細はこちらをご覧下さい。 ⇒ svelte-ie11-boilerplate
Android 4.4- で確認しています。
開発環境：Linux(Debian), Node.js 15.8.0。

構築手順

cron をダウンロード。

// main を指定して実行
npm ru-museum/svelte-ie11-boilerplate-ts-scss#main svelte-app
cd svelte-app
npm install

Rollup をスタートします。

npm run dev

ブラウザで localhost:5000 にアクセスしますと初期画面が表示されます。
画面で各サンプルが正しく表示されていることを確認して下さい。

公開用にビルドします。

npm run build

【注意１】

build 時に以下の警告が表示される場合は一部を修正して下さい。

(!) Plugin typescript: @rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.

rollup.config.js：
【修正】 sourcemap: true　⇒ sourcemap: !production

export default {
    input: 'src/main.ts',
    output: {
    // sourcemap: true,  
    sourcemap: !production,

※ 参考：stackoverflow

WEB 上へ公開するには、public フォルダ内の必要なファイル(.map を除く)をアップします。

【注意２】

(2022-12-11)

Rollup のバージョンアップ（v.3）に伴い以下のパッケージに不具合が生じています。

  "rollup-plugin-css-only": "^3.1.0",
  "rollup-plugin-terser": "^7.0.2",

Could not resolve dependency:
npm ERR! peer rollup@"1 || 2" from [email protected]
npm ERR! node_modules/rollup-plugin-css-only
npm ERR!   dev rollup-plugin-css-only@"^3.1.0" from the root project
....
npm ERR! Could not resolve dependency:
npm ERR! peer rollup@"^2.0.0" from [email protected]
npm ERR! node_modules/rollup-plugin-terser
npm ERR!   dev rollup-plugin-terser@"^7.0.2" from the root project

rollup-plugin-css-only のパッケージ作者は更新終了を宣告しており、解決方法は以下の解説に依っています。
Samuele：How To Update Rollup to Version 3

【解決方法】

パッケージを削除します。

 npm uninstall rollup-plugin-css-only rollup-plugin-terser

Samuele 氏提供のパッケージをインストールします。

npm install @el3um4s/rollup-plugin-css-only @el3um4s/rollup-plugin-terser

package.json を編集します。 ```

"type": "module", ```

rollup.config.js を編集します。 ```

import { terser } from 'rollup-plugin-terser';

import { terser } from "@el3um4s/rollup-plugin-terser";

import css from 'rollup-plugin-css-only';

import css from "@el3um4s/rollup-plugin-css-only";

import { scss } from 'svelte-preprocess';

import pkg from 'svelte-preprocess';
const { scss } = pkg;
import { spawn } from "child_process";

server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {

server = spawn('npm', ['run', 'start', '--', '--dev'], {

## 【注意３】
(2023-04-13)
* typescript のバージョンアップ（5.0）に伴い以下のエラー表示されます。
* deprecated  importsNotUsedAsValues, preserveValueImports

tsconfig options "importsNotUsedAsValues" and "preserveValueImports" are deprecated. Either set "ignoreDeprecations" to "5.0" in your tsconfig.json to silence this warning, or replace them in favor of the new "verbatimModuleSyntax" flag. LiveReload enabled (!) Plugin typescript: @rollup/plugin-typescript TS5101: Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead. (!) Plugin typescript: @rollup/plugin-typescript TS5101: Option 'preserveValueImports' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead.

* 解決方法は以下の解説に依っています。  
参照：[TypeScript errors and how to fix them : TS5101](https://typescript.tv/errors/)

### 【解決方法】
tsconfig.json

"compilerOptions": { “ignoreDeprecations”: “5.0” } ``

Top categories