Sublime进行Svelte前端应用开发_配置Rollup打包与组件语法

Sublime Text 可通过插件和配置支持 Svelte 开发。需安装 Svelte、SublimeLinter-contrib-eslint、Terminus 等插件，手动配置 rollup.config.js 并启用 sourcemap 与自动构建，配合语法关联和快捷键提升效率。

Sublime Text 本身不内置 Svelte 支持，但通过合理配置插件和工具链，完全可以胜任 Svelte 应用的开发与 Rollup 打包工作。关键在于补足语法高亮、智能提示、保存自动构建三块能力，而非强求“IDE 级集成”。

安装核心插件：Svelte 语法 + 构建支持

打开 Sublime Text 的命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Install Package，回车后搜索并安装：

• Svelte（由 alekseyk90 维护）—— 提供 .svelte 文件的语法高亮、括号匹配、基础代码片段
• SublimeLinter-contrib-eslint + eslint-plugin-svelte3（需本地项目已配好 ESLint）—— 实时校验组件逻辑与响应式声明
• Terminus（可选但推荐）—— 在 Sublime 内嵌终端运行 rollup -c -w，避免频繁切窗口

手动配置 Rollup 以适配 Sublime 工作流

Sublime 不会自动生成或管理 rollup.config.js，你需要在项目根目录手动创建。一个最小可用的 Svelte + Rollup 配置示例如下（基于 rollup-plugin-svelte 和 rollup-plugin-terser）：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js'
  },
  plugins: [
    svelte({ dev: !production }),
    resolve(),
    commonjs(),
    production && terser()
  ],
  watch: {
    clearScreen: false // 避免 Terminus 中滚动日志被清空
  }
};

登录后复制

保存后，在 Terminus 中执行 rollup -c -w 即可开启监听模式，修改 .svelte 文件后自动重打包。

立即学习“前端免费学习笔记（深入）”；

标签： css sublime js 前端 json node 编码 浏览器 app 工具 ai 应用开发 常见问题 前端应用