Svelte 构建配置-JavaScript中文网-JavaScript教程资源分享门户

在开始使用 Svelte 进行开发之前，我们需要了解如何对项目进行构建配置。合理的构建配置不仅能够提高开发效率，还能确保最终的生产环境应用性能最优。本章将详细介绍如何设置 Svelte 的构建配置。

安装必要的工具和依赖

在开始配置之前，你需要确保安装了 Node.js 和 npm。此外，为了更好地管理项目，我们通常会使用像 npm 或者 yarn 这样的包管理器来安装和管理项目的依赖。

初始化项目：首先，创建一个新的文件夹作为你的项目根目录，并在该目录中运行 npm init -y 来生成一个默认的 package.json 文件。
安装 Svelte：通过运行以下命令来安装 Svelte 及其相关的开发工具：
```
npm install svelte
```
安装构建工具：为了简化构建过程，我们可以安装一些常用的构建工具，如 rollup 和 vite。这里以 Rollup 为例：
```
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs
```

配置 Rollup

Rollup 是一个非常强大的模块打包工具，非常适合用来打包 Svelte 应用程序。下面我们将学习如何配置 Rollup 以支持 Svelte。

创建 Rollup 配置文件：在项目根目录下创建一个名为 rollup.config.js 的文件，用于存放 Rollup 的配置信息。

基本配置：打开 rollup.config.js 并添加以下内容：

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js', // 指定入口文件
  output: {
    file: 'public/build/bundle.js',
    format: 'iife' // 立即执行函数格式，适合直接在 HTML 中使用
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

添加 Svelte 插件：为了让 Rollup 能够处理 Svelte 文件，我们需要安装并配置一个 Svelte 插件：

npm install --save-dev @rollup/plugin-svelte

然后在 rollup.config.js 中添加 Svelte 插件：

// www.javascriptcn.com code example
import svelte from '@rollup/plugin-svelte';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    svelte({
      compilerOptions: {
        // 在这里可以添加 Svelte 编译选项
      }
    })
  ]
};

添加 Babel 支持

如果你希望支持更广泛的浏览器或需要转译最新的 JavaScript 特性，可以考虑添加 Babel 支持。

安装 Babel 及相关插件：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

配置 Babel：在项目根目录下创建一个 .babelrc 文件，并添加如下配置：
```
{
  "presets": ["@babel/preset-env"]
}
```

修改 Rollup 配置：在 rollup.config.js 中添加 Babel 插件：

// www.javascriptcn.com code example
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    svelte({
      compilerOptions: {
        // Svelte 编译选项
      }
    }),
    babel({
      exclude: 'node_modules/**' // 只转译源代码
    })
  ]
};

优化与调试

环境变量：你可以通过设置环境变量来控制不同环境下的行为。例如，使用 cross-env 包来设置 NODE_ENV：
```
npm install --save-dev cross-env
```
然后在 package.json 中添加脚本：
```
"scripts": {
  "build": "cross-env NODE_ENV=production rollup -c"
}
```

热更新：如果你想要实现开发服务器的热更新功能，可以使用 rollup-plugin-livereload 和 rollup-plugin-hmr 插件：

npm install --save-dev rollup-plugin-livereload rollup-plugin-hmr

然后在 rollup.config.js 中添加这些插件：

// www.javascriptcn.com code example
import livereload from 'rollup-plugin-livereload';
import hmr from 'rollup-plugin-hmr';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    svelte({
      compilerOptions: {
        // Svelte 编译选项
      }
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    process.env.NODE_ENV === 'development' && livereload('public'),
    process.env.NODE_ENV === 'development' && hmr()
  ],
  watch: {
    clearScreen: false
  }
};

以上就是 Svelte 应用的基本构建配置。通过合理地调整这些配置，可以让你的应用在开发和生产环境中都能得到最佳的表现。