将TypeScript添加到现有的Svelte项目中

尼耳多
1,413 阅读6分钟

自2020年起，Svelte正式支持TypeScript，然而，在你的Svelte项目中加入TypeScript会从根本上改变你的工具链。尽管我们无法预测你的工具链的形态，但我们可以假设它使用了webpack、Parcel或Rollup等Web应用捆绑器。为了将TypeScript添加到Svelte项目中，我们基本上要告诉捆绑器将TypeScript代码转化为JavaScript代码。

在本教程中，我们将学习如何使用上述三个捆绑器为Svelte配置TypeScript。要跟上这篇文章，你需要。

  • TypeScript的基本知识
  • 了解你当前的工具链
  • Yarn作为你的软件包管理器

让我们开始吧!

共享的构建配置

为了跟上本教程中的例子，首先，我们要配置我们的共享构建。你应该把你的源文件存放在./src/ 目录中，把你的构建文件存放在./build 目录中。

应用程序的入口点将是./src/index.ts 文件，它将从./App.svelte 文件中导入App 类，对其进行初始化，并默认导出，如下例所示。

import App from './App.svelte';

export default (new App({ target: document.body }));

Svelte将把DOM条目注入到一个HTML页面的主体中。现在，我们可以实现App 这个组件。

<script lang="ts">
    import { onMount } from 'svelte';

    export let result: number = 2 + 2;

    onMount(() => {
        setTimeout(
            () => { result *= 3; },
            500,
        );
    });
</script>

<div>{ result }</div>

在下面的代码块中，<script lang="ts"> 标签声明和变量定义export let result: number = 2 + 2; 表示代码现在存在于TypeScript上下文中。

接下来，通过输入yarn build ，在npm中调用build 脚本。build 脚本将运行你选择的捆绑器，编译你的项目，并产生一个单一的./build/bundle.js 文件。为了使用./build/bundle.js 文件，你应该创建一个相应的./build/index.html 文件。

<!DOCTYPE html>
<html lang="en">
<body>
    <script defer src='./bundle.js'></script>
</body>
</html>

现在，在你的浏览器中导航到./build/index.html 文件，你应该看到你的应用程序在运行！现在，让我们来看看三个流行的捆绑器，你可以用它们来迁移你的应用程序。

Rollup

Rollup是一个由Rich Harris创建的库，他是Svelte的创建者。因此，Svelte通过一个定制的集成包支持Rollup也就不足为奇了。

要使用Rollup，我们首先需要安装以下包作为开发依赖。

  • @rollup/plugin-commonjs
  • @rollup/plugin-node-resolve
  • @rollup/plugin-typescript
  • @tsconfig/svelte
  • rollup
  • rollup-plugin-svelte
  • svelte
  • svelte-preprocess
  • tslib
  • typescript

要安装这些依赖项，我们可以使用下面的部分./package.json 文件。

{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "20.0.0",
    "@rollup/plugin-node-resolve": "13.0.4",
    "@rollup/plugin-typescript": "8.2.5",
    "@tsconfig/svelte": "2.0.1",
    "rollup": "2.56.2",
    "rollup-plugin-svelte": "7.1.0",
    "svelte": "3.42.1",
    "svelte-preprocess": "4.7.4",
    "tslib": "2.3.1",
    "typescript": "4.3.5"
  }
}

另外，我们也可以使用Yarn来安装这些依赖项。

yarn add @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript @tsconfig/svelte rollup rollup-plugin-svelte svelte svelte-preprocess tslib typescript -E -D

Rollup的TypeScript配置

接下来，我们将使用下面的./tsconfig.json 文件为Svelte和Rollup配置TypeScript。

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*"]
}

@tsconfig/svelte 项目将导入一些额外的配置到我们的项目中。你可以根据需要添加其他设置，但首先要确保它们与Svelte不冲突。

卷积配置

让我们为Rollup添加必要的配置。在下面的代码块中，你会看到我们的示范性./rollup.config.js 文件，它通过svelte-preprocess 库设置了正确的预处理。

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

export default {
    input: './src/index.ts',
    output: {
        format: 'iife',
        file: './build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess(),
        }),
        resolve({ browser: true }),
        commonjs(),
        typescript(),
    ],
};

接下来，我们将创建一个TypeScript三斜线指令，通知编译器对svelte 包的依赖性。我们将需要创建一个名为./src/global.d.ts 的文件，并添加以下内容。

/// <reference types="svelte" />

完成这些步骤后，你应该能够使用Rollup编译你的项目了。

webpack

webpack是另一个流行的捆绑器，它有一个为Svelte定制的集成包。为了使用webpack将TypeScript迁移到Svelte，我们将template-webpack减少到只有关键部分。

为了开始工作，我们将安装以下软件包作为开发依赖项。

  • @tsconfig/svelte
  • svelte
  • svelte-loader
  • svelte-preprocess
  • ts-loader
  • typescript
  • webpack
  • webpack-cli

我们可以使用下面的package.json 来安装这些依赖项。

{
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "@tsconfig/svelte": "1.0.10",
        "svelte": "3.31.2",
        "svelte-loader": "3.0.0",
        "svelte-preprocess": "4.3.0",
        "ts-loader": "8.0.4",
        "typescript": "4.0.3",
        "webpack": "5.16.0",
        "webpack-cli": "4.4.0"
    }
}

如果你喜欢使用Yarn，你可以运行下面的代码。

yarn add @tsconfig/svelte svelte svelte-loader svelte-preprocess ts-loader typescript webpack webpack-cli -E -D

webpack的TypeScript配置

现在，让我们使用下面提供的部分./tsconfig.json 文件定义一个基本的TypeScript配置。如你所见，我们将从下面的@tsconfig/svelte 项目中导入一些配置。

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*"],
    "exclude": ["node_modules/*"]
}

webpack配置

为了给Svelte和TypeScript配置webpack，我们必须对我们的webpack配置做如下修改。

  • 将一个入口点定义为TypeScript文件
  • 指导webpack使用ts-loader 来处理TypeScript文件
  • 指导webpack使用svelte-loader 和svelte-preprocess 来处理Svelte文件

存储在./webpack.config.js 文件中的配置应该看起来像下面的代码。

const path = require('path');
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    entry: {
        'bundle': ['./src/index.ts']
    },
    resolve: {
        alias: {
            svelte: path.dirname(require.resolve('svelte/package.json'))
        },
        extensions: ['.mjs', '.js', '.ts', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: path.join(__dirname, '/build'),
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        preprocess: sveltePreprocess(),
                    }
                }
            }
        ]
    },
};

如果你正确执行了这些步骤，你应该能够使用webpack成功地编译和运行你的项目。

包裹

最后，我们来看看Parcel。Parcel目前并不被Svelte支持，然而，它是一个流行的、多功能的捆绑器，被开发者广泛使用。

在撰写本文时，Parcel 2是一个候选版本。以下部分的信息是指Parcel 1。

在使用Parcel时，你需要确保安装了以下开发依赖项。

  • @tsconfig/svelte
  • parcel-bundler
  • parcel-plugin-svelte
  • svelte
  • svelte-preprocess
  • typescript

为了执行迁移，你可以使用以下部分package.json 文件。

{
  "scripts": {
    "build": "parcel build ./src/index.html"
  },
  "devDependencies": {
    "@tsconfig/svelte": "2.0.1",
    "parcel-bundler": "1.12.5",
    "parcel-plugin-svelte": "4.0.9",
    "svelte": "3.42.1",
    "svelte-preprocess": "4.7.4",
    "typescript": "4.3.5"
  }
}

要使用Yarn安装依赖项，请复制下面的代码片段。

yarn add @tsconfig/svelte parcel-bundler parcel-plugin-svelte svelte svelte-preprocess typescript

用于Parcel的Svelte配置

为了让我们的Svelte文件包含TypeScript代码，我们需要在./svelte.config.js 文件中指定Svelte配置。我们将使用svelte-preprocess 库。

下面是一个与ECMAScript 5兼容的示范性配置脚本。

const preprocess = require('svelte-preprocess');

module.exports = {
    preprocess: preprocess(),
};

用于Parcel的TypeScript配置

让我们使用下面的部分./tsconfig.json 文件为TypeScript配置我们的应用程序。你的配置应该扩展到从@tsconfig/svelte 项目中获取的配置。

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*"],
    "exclude": ["node_modules/*"]
}

现在，请随意测试你的设置。完成这些步骤后，你已经成功地为Parcel配置了Svelte和TypeScript。

选择正确的捆绑器

正如你可能知道的，捆绑器是一种快速变化的技术。Svelte需要相当广泛的整合，所以当你升级依赖关系时，你应该始终检查你的工具链的行为。

由于Svelte和Rollup之间固有的兼容性，Rollup是一个安全的选择，可以用于你的项目的耐久性。虽然我们不能说webpack和Parcel也是如此，但第三方集成包总是有可能缓解从TypeScript到Svelte的迁移。

如果你使用不同的捆绑器，自定义捆绑器，或者根本没有捆绑器，你可能需要自己广泛地研究这个话题，并编写一个自定义适配器，以便在你的工具链中允许转译。记住，你需要为TypeScript和Svelte文件启用转译。

结论

尽管由于Svelte对TypeScript的官方支持，将TypeScript添加到Svelte应用程序中似乎是不言自明的，但添加正确的配置可能是相当复杂的。

在本教程中，我们学习了如何使用Rollup、webpack和Parcel为Svelte配置我们的TypeScript代码，这三个高性能的捆绑器使我们的代码迁移更容易。

The postAdding TypeScript to an existing Svelte projectappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝