MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte项目构建工具选择与配置

2021-10-255.6k 阅读

Svelte 项目构建工具选择与配置

Svelte 项目构建概述

在开发 Svelte 项目时，构建工具扮演着至关重要的角色。它不仅能将 Svelte 组件转换为可在浏览器中运行的 JavaScript、CSS 和 HTML，还负责诸如代码压缩、热模块替换（HMR）、处理各种资源文件等任务，极大地提升开发效率与项目性能。选择合适的构建工具并正确配置，是打造高质量 Svelte 项目的基础。

常见构建工具介绍

  1. Vite
    • 特点：Vite 是新一代的前端构建工具，基于 ES 模块预加载，在开发环境下具有极快的冷启动速度。它利用浏览器原生支持的 ES 模块，无需像传统工具那样进行复杂的打包操作，直接在浏览器中按需加载模块。对于 Svelte 项目，Vite 提供了官方插件，能够很好地支持 Svelte 组件的编译。
    • 优势：快速的开发启动时间，尤其适合大型项目，能显著提高开发效率。同时，Vite 对现代前端技术的支持度高，如支持 CSS 模块、PostCSS 等。
    • 劣势：在某些复杂的项目场景下，其插件生态可能不如 Webpack 丰富，不过随着发展，这一劣势正逐渐减弱。
  2. Webpack
    • 特点：Webpack 是前端开发领域中非常成熟且应用广泛的构建工具。它通过 loader 和 plugin 机制，能够对各种类型的文件进行处理，灵活性极高。对于 Svelte 项目，可以通过 svelte - loader 来处理 Svelte 组件。
    • 优势：强大的生态系统，有大量的 loader 和 plugin 可供选择，能满足各种复杂项目的需求。可以对代码进行深度优化，如代码分割、Tree - shaking 等。
    • 劣势：配置相对复杂，尤其是在处理多个 loader 和 plugin 之间的关系时。在开发环境下，启动速度可能较慢，特别是对于大型项目。
  3. Rollup
    • 特点：Rollup 专注于 JavaScript 模块打包，以其高效的 Tree - shaking 能力而闻名。它能将多个模块打包成一个或多个文件，生成的代码简洁且高效。对于 Svelte 项目，Rollup 可以配合 rollup - plugin - svelte 来处理 Svelte 组件。
    • 优势：生成的代码质量高，非常适合构建库。在处理纯 JavaScript 项目时，性能表现出色，能有效去除未使用的代码。
    • 劣势：对非 JavaScript 文件的处理能力相对较弱，相比 Webpack，其生态系统不够丰富，在处理复杂项目需求时可能会受到一定限制。

构建工具的选择依据

  1. 项目规模与复杂度
    • 小型项目：如果是小型的 Svelte 项目，如个人的实验性项目或简单的展示页面，Vite 是一个很好的选择。其简单的配置和快速的开发启动速度，能让开发者迅速搭建项目并开始编码。例如，一个简单的单页 Svelte 应用，只包含几个基本的 Svelte 组件和少量的样式，使用 Vite 可以在极短的时间内启动开发服务器，并且在开发过程中修改代码能即时看到效果。
    • 大型项目：对于大型、复杂的 Svelte 项目，Webpack 可能更合适。这类项目通常需要处理多种类型的文件，如不同格式的图片、字体文件，以及各种后端接口的调用等。Webpack 的强大生态系统和灵活的配置能满足这些复杂需求。比如一个企业级的 Svelte 应用，涉及到用户登录、权限管理、大量的业务组件等，Webpack 可以通过各种 loader 和 plugin 来处理这些复杂的业务逻辑和资源管理。
  2. 开发场景
    • 开发库：如果是开发 Svelte 组件库，Rollup 是首选。其出色的 Tree - shaking 能力能确保生成的库代码简洁，去除未使用的部分，提高库的性能。例如，开发一个供其他项目使用的 Svelte 组件库，Rollup 可以将组件库打包成高效的 JavaScript 文件，方便其他项目引入和使用。
    • 开发应用：对于开发完整的 Svelte 应用，Vite 和 Webpack 都有各自的优势。Vite 适合追求快速开发体验的团队，而 Webpack 更适合对项目有高度定制化需求的团队。
  3. 团队技术栈
    • 如果团队成员对 Webpack 有丰富的经验，那么在 Svelte 项目中继续使用 Webpack 可以减少学习成本，快速上手项目的构建配置。反之，如果团队希望尝试新的技术和更简洁的开发流程，Vite 则是一个不错的选择。

使用 Vite 构建 Svelte 项目

  1. 初始化项目
    • 首先确保已安装 Node.js 和 npm（或 yarn）。然后在命令行中使用以下命令初始化一个基于 Vite 的 Svelte 项目：
    npm create vite@latest my - svelte - app --template svelte
cd my - svelte - app
npm install
    • 上述命令中，npm create vite@latest 用于创建一个新的 Vite 项目，my - svelte - app 是项目名称，可以根据实际情况修改。--template svelte 表示使用 Svelte 模板。进入项目目录后，npm install 安装项目所需的依赖。
  2. 项目结构
    • 初始化完成后，项目结构如下：
    my - svelte - app
├── index.html
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.svelte
│   ├── main.js
│   └── vite - svg - loader.d.ts
├── tsconfig.json
└── vite.config.js
    • index.html 是项目的入口 HTML 文件。public 目录用于存放静态资源，如图片、图标等。src 目录是项目的源代码目录，App.svelte 是应用的主组件，main.js 用于将 Svelte 应用挂载到 DOM 上。vite - svg - loader.d.ts 是用于支持 SVG 加载的类型声明文件（如果项目使用 SVG 加载）。tsconfig.json 是 TypeScript 的配置文件（如果项目使用 TypeScript），vite.config.js 是 Vite 的配置文件。
  3. Vite 配置文件（vite.config.js）
    • 基本配置：
    import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite - plugin - svelte';

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});
    • 在上述配置中，首先引入 defineConfig 用于定义 Vite 配置，然后引入 svelte 插件来处理 Svelte 组件。在 resolve.alias 中，设置了别名 @ 指向 src 目录，方便在项目中导入模块，例如 import { someFunction } from '@/utils';。
    • 自定义配置：
    • 代理配置：如果项目需要与后端服务器进行交互，在开发环境下可以使用 Vite 的代理功能。假设后端服务器地址为 http://localhost:3000，在 vite.config.js 中添加如下配置：
    import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite - plugin - svelte';

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
    • 上述配置中，通过 server.proxy 设置了代理，将以 /api 开头的请求代理到 http://localhost:3000，并去除请求路径中的 /api 前缀。这样在前端代码中可以使用 /api/user 这样的路径来请求后端接口，而实际请求会被代理到 http://localhost:3000/user。
    • CSS 配置：Vite 支持多种 CSS 预处理器，如 Sass、Less 等。以 Sass 为例，首先安装 sass 和 @vitejs/plugin - sass：
    npm install sass @vitejs/plugin - sass
    • 然后在 vite.config.js 中添加插件配置：
    import { defineConfig } from 'vite';
import svelte from '@sveltejs/vite - plugin - svelte';
import sass from '@vitejs/plugin - sass';

export default defineConfig({
  plugins: [svelte(), sass()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});
    • 现在项目就可以使用 Sass 语法编写样式文件了，例如创建一个 styles.scss 文件，在 Svelte 组件中可以通过 @import './styles.scss'; 来导入样式。
  4. 开发与构建
    • 开发：在项目根目录下运行 npm run dev 命令，Vite 会启动开发服务器，默认在 http://localhost:5173 打开项目。修改代码后，浏览器会自动刷新显示最新的效果，这得益于 Vite 的热模块替换（HMR）功能。
    • 构建：运行 npm run build 命令，Vite 会将项目构建到 dist 目录下。构建后的文件经过压缩和优化，可以直接部署到生产环境。例如，可以将 dist 目录下的文件上传到服务器的指定目录，通过配置服务器的静态资源服务，使项目在生产环境中正常运行。

使用 Webpack 构建 Svelte 项目

  1. 初始化项目
    • 首先创建一个新的目录作为项目根目录，例如 my - svelte - webpack - app，然后在该目录下初始化 package.json：
    mkdir my - svelte - webpack - app
cd my - svelte - webpack - app
npm init -y
    • 接着安装必要的依赖，包括 webpack、webpack - cli、svelte - loader 等：
    npm install webpack webpack - cli svelte - loader svelte
  2. 项目结构
    • 初始化完成后，项目结构大致如下：
    my - svelte - webpack - app
├── package.json
├── src
│   ├── App.svelte
│   └── main.js
└── webpack.config.js
    • src 目录存放项目源代码，App.svelte 是主组件，main.js 用于将 Svelte 应用挂载到 DOM 上。webpack.config.js 是 Webpack 的配置文件。
  3. Webpack 配置文件（webpack.config.js）
    • 基本配置：
    const path = require('path');
const svelteLoader = require('svelte - loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader:'svelte - loader',
          options: {
            emitCss: true,
            hotReload: true
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      svelte: path.resolve('node_modules','svelte')
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser','module', 'main']
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080
  }
};
    • 在上述配置中，entry 指定了项目的入口文件为 src/main.js。output 配置了输出路径为 dist 目录，输出文件名是 bundle.js。在 module.rules 中，通过 svelte - loader 来处理 .svelte 文件，emitCss: true 表示将 Svelte 组件中的样式提取出来生成单独的 CSS 文件，hotReload: true 开启热模块替换功能。resolve.alias 配置了 svelte 模块的路径，resolve.extensions 配置了可识别的文件扩展名，resolve.mainFields 用于指定在查找模块时优先使用的字段。devServer 配置了开发服务器的相关参数，如静态资源目录、压缩和端口号。
    • 自定义配置：
    • 代码分割：Webpack 可以通过 splitChunks 进行代码分割，提高应用的加载性能。例如，将第三方库和业务代码分开打包：
    const path = require('path');
const svelteLoader = require('svelte - loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader:'svelte - loader',
          options: {
            emitCss: true,
            hotReload: true
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      svelte: path.resolve('node_modules','svelte')
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser','module', 'main']
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080
  }
};
    • 上述配置中，optimization.splitChunks.chunks: 'all' 表示对所有类型的 chunks 进行代码分割。Webpack 会自动将第三方库等重复使用的代码提取到单独的文件中，这样在页面加载时可以并行加载这些文件，提高加载速度。
    • 处理其他资源：对于图片、字体等资源，可以通过 file - loader 和 url - loader 来处理。首先安装这两个 loader：
    npm install file - loader url - loader
    • 然后在 webpack.config.js 的 module.rules 中添加如下配置：
    module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader:'svelte - loader',
          options: {
            emitCss: true,
            hotReload: true
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url - loader',
            options: {
              limit: 8192,
              name: 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file - loader',
            options: {
              name: 'fonts/[name].[ext]'
            }
          }
        ]
      }
    ]
  }
  // 其他配置...
};
    • 上述配置中，url - loader 用于处理图片，limit: 8192 表示当图片大小小于 8KB 时，会将图片转换为 base64 编码嵌入到 JavaScript 中，以减少请求数量。name: 'images/[name].[ext]' 表示将图片输出到 dist/images 目录下，保持原文件名和扩展名。file - loader 用于处理字体文件，将字体文件输出到 dist/fonts 目录下。
  4. 开发与构建
    • 开发：在项目根目录下运行 npx webpack - serve 命令，Webpack 会启动开发服务器，默认在 http://localhost:8080 打开项目。修改代码后，浏览器会自动刷新，热模块替换功能也会生效。
    • 构建：运行 npx webpack 命令，Webpack 会将项目构建到 dist 目录下。构建后的 bundle.js 以及其他相关资源文件可以部署到生产环境。例如，可以将 dist 目录下的文件部署到服务器的静态资源目录，并配置服务器的路由等，使项目在生产环境中正常运行。

使用 Rollup 构建 Svelte 项目

  1. 初始化项目
    • 首先创建一个新的项目目录，例如 my - svelte - rollup - app，然后在该目录下初始化 package.json：
    mkdir my - svelte - rollup - app
cd my - svelte - rollup - app
npm init -y
    • 接着安装必要的依赖，包括 rollup、rollup - plugin - svelte、svelte 等：
    npm install rollup rollup - plugin - svelte svelte
  2. 项目结构
    • 初始化完成后，项目结构大致如下：
    my - svelte - rollup - app
├── package.json
├── src
│   ├── App.svelte
│   └── main.js
└── rollup.config.js
    • src 目录存放项目源代码，App.svelte 是主组件，main.js 用于将 Svelte 应用挂载到 DOM 上。rollup.config.js 是 Rollup 的配置文件。
  3. Rollup 配置文件（rollup.config.js）
    • 基本配置：
    import svelte from 'rollup - plugin - svelte';
import resolve from '@rollup/plugin - resolve';
import commonjs from '@rollup/plugin - commonjs';
import { terser } from 'rollup - plugin - terser';

export default {
  input:'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MySvelteApp'
  },
  plugins: [
    svelte({
      emitCss: true
    }),
    resolve(),
    commonjs(),
    terser()
  ]
};
    • 在上述配置中，input 指定了项目的入口文件为 src/main.js。output 配置了输出路径为 dist/bundle.js，format: 'iife' 表示输出为立即执行函数表达式（IIFE）格式，name: 'MySvelteApp' 是为 IIFE 格式指定的全局变量名。在 plugins 中，svelte 插件用于处理 Svelte 组件，emitCss: true 表示将 Svelte 组件中的样式提取出来生成单独的 CSS 文件。resolve 插件用于解析模块，commonjs 插件用于将 CommonJS 模块转换为 ES 模块，terser 插件用于压缩代码。
    • 自定义配置：
    • 多入口构建：如果项目有多个入口文件，例如一个主应用入口和一个用于特定功能的入口，可以这样配置：
    import svelte from 'rollup - plugin - svelte';
import resolve from '@rollup/plugin - resolve';
import commonjs from '@rollup/plugin - commonjs';
import { terser } from 'rollup - plugin - terser';

export default [
  {
    input:'src/main.js',
    output: {
      file: 'dist/main - bundle.js',
      format: 'iife',
      name: 'MySvelteMainApp'
    },
    plugins: [
      svelte({
        emitCss: true
      }),
      resolve(),
      commonjs(),
      terser()
    ]
  },
  {
    input:'src/feature.js',
    output: {
      file: 'dist/feature - bundle.js',
      format: 'iife',
      name: 'MySvelteFeatureApp'
    },
    plugins: [
      svelte({
        emitCss: true
      }),
      resolve(),
      commonjs(),
      terser()
    ]
  }
];
    • 上述配置中，通过数组的形式定义了两个构建任务，分别以 src/main.js 和 src/feature.js 为入口文件，输出不同的打包文件 dist/main - bundle.js 和 dist/feature - bundle.js。
    • 处理 CSS 模块：Rollup 可以配合 rollup - plugin - css - only 来更好地处理 CSS 模块。首先安装该插件：
    npm install rollup - plugin - css - only
    • 然后在 rollup.config.js 中添加插件配置：
    import svelte from 'rollup - plugin - svelte';
import resolve from '@rollup/plugin - resolve';
import commonjs from '@rollup/plugin - commonjs';
import { terser } from 'rollup - plugin - terser';
import css from 'rollup - plugin - css - only';

export default {
  input:'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MySvelteApp'
  },
  plugins: [
    svelte({
      emitCss: false
    }),
    css({ output: 'bundle.css' }),
    resolve(),
    commonjs(),
    terser()
  ]
};
    • 上述配置中，svelte({ emitCss: false }) 表示不再让 svelte 插件生成 CSS，而是由 css 插件来处理。css({ output: 'bundle.css' }) 表示将 CSS 输出为 dist/bundle.css 文件。
  4. 开发与构建
    • 开发：由于 Rollup 本身没有内置的开发服务器，在开发过程中可以使用一些第三方工具，如 rollup - watch。首先安装 rollup - watch：
    npm install rollup - watch
    • 然后在 package.json 的 scripts 中添加如下命令：
    {
  "scripts": {
    "dev": "rollup - watch --config rollup.config.js"
  }
}
    • 运行 npm run dev 命令，rollup - watch 会监听文件变化并重新打包，在浏览器中手动刷新页面即可看到最新效果。
    • 构建：运行 npx rollup - c 命令，Rollup 会按照 rollup.config.js 的配置将项目构建到 dist 目录下。构建后的 bundle.js 和相关的 CSS 文件等可以部署到生产环境。例如，可以将 dist 目录下的文件部署到服务器的静态资源目录，并配置服务器以提供这些资源服务，使项目在生产环境中正常运行。

通过对 Vite、Webpack 和 Rollup 这三种常见构建工具在 Svelte 项目中的选择与配置的详细介绍，开发者可以根据项目的具体需求、规模和团队技术栈等因素，选择最适合的构建工具，并进行合理配置，从而高效地开发出高质量的 Svelte 项目。