介绍

工欲善其事，必先利其器。这里将手把手带你搭建一个本地开发环境。

本教程用于搭建Svelte+Typescript开发环境。

完整项目地址：https://github.com/STDSuperman/svelte-learn

安装

这里将采用rollup进行环境配置，故需要装一下插件，由于包模块比较多，可以直接复制粘贴进行安装即可。

开发依赖

npm安装方式

npm i @babel/preset-env @babel/preset-typescript @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript @swc/core @tsconfig/svelte babel-plugin-transform-async-to-promises cross-env npm-run-all rimraf rollup rollup-plugin-html2 rollup-plugin-livereload rollup-plugin-serve rollup-plugin-svelte rollup-plugin-terser svelte-check svelte-preprocess tslib typescript rollup-plugin-css-only -D

yarn安装方式（推荐）

yarn add @babel/preset-env @babel/preset-typescript @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript @swc/core @tsconfig/svelte babel-plugin-transform-async-to-promises cross-env npm-run-all rimraf rollup rollup-plugin-html2 rollup-plugin-livereload rollup-plugin-serve rollup-plugin-svelte rollup-plugin-terser svelte-check svelte-preprocess tslib typescript rollup-plugin-css-only -D

生产依赖

npm安装方式

npm i svelte -S

yarn安装方式（推荐）

yarn add svelte -S

相关包介绍

• @babel/preset-env：（神器），一个babel预设，用于转化js代码中的高级特性，让我们可以轻松的使用一些高级语法而不用考虑浏览器兼容问题（前提是这个预设支持转化的语法）。
• @babel/preset-typescript：如果使用typescript，那么推荐安装，内部包含@babel/plugin-transform-typescript插件，该插件用于对typescript语法提供支持，但不提供类型检查能力，需要配合typescript使用。
• @rollup/plugin-commonjs：rollup插件，用于转化commonjs模块为es6模块，使之能集成到rollup bundle中。
• @rollup/plugin-node-resolve：一个Rollup插件，它使用Node解析算法定位模块，以便在node_modules中使用第三方模块。
• @rollup/plugin-typescript：这是一个可以在Typescript，Babel，Browserslists和rollup之间进行集成的rollup插件。 它也是Typescript插件，可实现与rollup的完全互操作性。 并且具备非常强大的绑定和对生成的Typescript声明文件的tree shaking能力，可与代码拆分无缝地协同工作。
• @swc/core：一个十分快速的typescript/javascript编译器。
• @tsconfig/svelte：用于svelte的基础ts配置。
• babel-plugin-transform-async-to-promises：转化async方法为promise调用链的babel插件。
• cross-env：设置环境变量好用的工具。
• npm-run-all：一个脚手架工具能够帮助我们并行或串行运行多个npm命令。
• rimraf：等同于我们执行rm -rf，帮助我们在启动构建命令的时候清空相关目录。
• rollup：模块打包器。
• rollup-plugin-html2：为模块html文件插入打包好的脚本bundle。
• rollup-plugin-livereload：监听构建的bundle改变，重载页面。
• rollup-plugin-serve：启动一个本地服务。
• rollup-plugin-svelte：用于编译svelte组件。
• rollup-plugin-terser：压缩代码。
• svelte-check：检测代码编译错误，无用的css等。
• svelte-preprocess：具有合理默认值的Svelte预处理程序，支持PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug等。 tslib：这是TypeScript的运行时库，其中包含所有TypeScript辅助函数。该库主要由TypeScript中的--importHelpers标志使用。 使用--importHelpers时，该模块在以下发出的文件中使用诸如__extends和__assign之类的辅助函数。 typescript：typescript支持。

rollup相关配置

首先在根目录新建rollup配置文件rollup.config.js，然后输入以下内容：

import commonjs from '@rollup/plugin-commonjs';
import html from 'rollup-plugin-html2';
import livereload from 'rollup-plugin-livereload';
import resolve from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import svelte from 'rollup-plugin-svelte';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import preprocess from 'svelte-preprocess';
import { transformSync } from '@swc/core';
import css from 'rollup-plugin-css-only';

const buildDir = 'dist'
const isDev = process.env.NODE_ENV === 'development';
const port = 3000;

const plugins = [
    svelte({
        dev: isDev,
        extensions: ['.svelte'],
        preprocess: preprocess({
            typescript({content}) {
                const { code } = transformSync(content, {
                    jsc: {
                        parser: {syntax: 'typescript'}
                    }
                });
                return { code };
            }
        })
    }),
    css({ output: `${buildDir}/bundle.css` }),
    typescript({sourceMap: isDev}),
    resolve({
        browser: true,
        dedupe: ['svelte']
    }),
    commonjs(),
    html({
        template: './src/index.html',
        fileName: 'index.html'
    })
]

if (isDev) {
    plugins.push(
        serve({
            contentBase: buildDir,
            historyApiFallback: true,
            port
        }),
        livereload({watch: buildDir})
    );
} else {
    plugins.push(terser())
}

module.exports = {
    input: 'src/main.ts',
    output: {
        name: 'bundle',
        file: `${buildDir}/bundle.js`,
        format: 'iife',
        sourceMap: isDev
    },
    plugins
}

babel配置

同样在根目录下新建.babelrc文件，添加如下配置：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [["babel-plugin-transform-async-to-promises"]]
}

启动命令配置

在package.json的scripts下添加如下命令：

"scripts": {
    "start": "cross-env NODE_ENV=development rimraf dist && run-p watch:*",
    "clean": "rimraf dist",
    "check": "svelte-check",
    "build": "run-s clean check compile",
    "compile": "cross-env NODE_ENV=production rollup --config",
    "watch:check": "svelte-check --watch",
    "watch:build": "cross-env NODE_ENV=development rollup --config --watch"
}

项目结构

|─.babelrc
├─package.json
├─rollup.config.js
├─tsconfig.json
├─yarn-error.log
├─yarn.lock
├─src
|  ├─App.svelte
|  ├─index.html
|  ├─main.ts
|  ├─components
├─dist
|  ├─bundle.js
|  ├─index.html
|  ├─dist
|  |  └bundle.css

入口文件

import App from './App.svelte';

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

如果你有接触过Vue或React，相信这里你也应该能轻松上手。做完这些之后我们就能轻松的开启我们的Svelte之旅了。