#接口: Dev

Dev 选项用于控制与开发相关的行为，包括 HMR、DevServer 等。

#属性

#assetPrefix?

optional assetPrefix?: string | boolean

Dev.assetPrefix 用于设置开发环境下静态资源的 URL 前缀。

#默认值

undefined

#备注

在 rspeedy dev 期间，如果该选项未被设置为 false，dev 插件会将其规范化为 http://<detected-host>:<port>/，并在配置了 server.base 时将其追加进去。

Dev.assetPrefix 的作用与 Rspack 的 output.publicPath 配置基本相同，区别如下：

• dev.assetPrefix 仅在开发环境下生效。

• dev.assetPrefix 默认会自动在末尾添加 /。

• dev.assetPrefix 的值会写入 process.env.ASSET_PREFIX 环境变量。

#示例

如果 dev.assetPrefix 设置为 true，URL 前缀将为 http://<host>:<port>/：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: true,
  },
})

如果 dev.assetPrefix 设置为字符串，该值会作为前缀自动添加到静态资源 URL 上。

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: 'https://example.com/assets/',
  },
})

Rspeedy server 监听的端口号可能会发生变化。例如，如果端口已被占用，Rspeedy 会自动递增端口号，直到找到一个可用端口。

为了避免 dev.assetPrefix 因端口变化而失效，可以使用以下方法之一：

• Enable server.strictPort.

• 使用 <port> 占位符来引用当前端口号，Rspeedy 会将该占位符替换为实际监听的端口号。

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    assetPrefix: 'https://example.com:<port>/assets/',
  },
})

#hmr?

optional hmr?: boolean

是否启用模块热替换（HMR）。

#默认值

true

#备注

默认情况下，Rspeedy 优先使用 HMR 来更新模块。如果 HMR 被禁用，或在某些场景下无法使用，则会自动回退到 Dev.liveReload。

如需完全禁用 HMR 和 live reload，请将 dev.hmr 和 dev.liveReload 都设置为 false。此时页面不会向开发服务器发起 WebSocket 请求，文件变化时页面也不会自动刷新。

#示例

禁用 HMR：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
  },
})

同时禁用 HMR 和 live reload：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
    liveReload: false,
  },
})

#liveReload?

optional liveReload?: boolean

是否启用 live reload 功能。

#默认值

true

#备注

当 Dev.hmr 被禁用或在某些场景下无法使用时，live reload 会作为回退方案。启用后，源文件发生变化时页面会自动刷新。

如需完全禁用 HMR 和 live reload，请将 dev.hmr 和 dev.liveReload 都设置为 false。此时页面不会向开发服务器发起 WebSocket 请求，文件变化时页面也不会自动刷新。

#示例

禁用 live reload：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    liveReload: false,
  },
})

同时禁用 HMR 和 live reload：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    hmr: false,
    liveReload: false,
  },
})

#progressBar?

optional progressBar?: boolean | { id?: string; }

是否在编译过程中显示进度条。

#默认值

false

#示例

启用进度条。

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    progressBar: true,
  },
})

修改进度条的 id

如需修改进度条左侧显示的文本，请设置 id 选项：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    progressBar: {
      id: 'Some Text'
    },
  },
})

#watchFiles?

optional watchFiles?: WatchFiles | WatchFiles[]

监听指定文件和目录的变化。当检测到文件变化时，可以触发页面重新加载或重启开发服务器。

#默认值

undefined

#示例

• 指定需要监听变更的文件和目录。

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    watchFiles: {
      paths: ['src/**', 'public/**'],
    },
  },
})

• 使用 chokidar 的选项进行监听。

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  dev: {
    watchFiles: {
      paths: ['src/**', 'public/**'],
      options: { usePolling: false },
    },
  },
})

#writeToDisk?

optional writeToDisk?: boolean | ((filename: string) => boolean)

Lynx Default Changed

用于控制是否将开发环境的构建产物写入磁盘。

#默认值

true

#备注

该选项会透传给 `webpack-dev-middleware`。

设置 writeToDisk: true 不会改变 webpack-dev-middleware 的行为，通过浏览器访问的 bundle 文件仍然由内存提供。

该选项也接受 Function 类型的值，可用于过滤需要写入磁盘的文件。

该函数的逻辑与 Array#filter 相同：返回 false 时不写入该文件，返回 true 时将该文件写入磁盘。

#示例

// lynx.config.ts
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  dev: {
    writeToDisk: (filePath) => /superman\.css$/.test(filePath),
  },
})