turbo (實驗性功能)

警告：這些功能屬於實驗性質，僅在執行 next --turbo 時有效。

webpack 載入器

目前 Turbopack 支援 webpack 載入器 API 的子集，允許您在 Turbopack 中使用部分 webpack 載入器來轉換程式碼。

要設定載入器，請在 next.config.js 中新增已安裝的載入器名稱及其選項，將檔案副檔名對應至載入器清單：

next.config.js

module.exports = {
  experimental: {
    turbo: {
      rules: {
        // 含選項的格式
        '*.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // 不含選項的格式
        '*.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

根據上述設定完成後，您就可以在應用程式中使用轉換後的程式碼：

import MyDoc from './my-doc.mdx'

export default function Home() {
  return <MyDoc />
}

解析別名

透過 next.config.js，可以設定 Turbopack 透過別名修改模組解析方式，類似於 webpack 的 resolve.alias 設定。

要設定解析別名，請在 next.config.js 中將匯入模式對應至新的目標位置：

next.config.js

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

這會將 underscore 套件的匯入別名為 lodash 套件。換句話說，import underscore from 'underscore' 將會載入 lodash 模組而非 underscore。

Turbopack 也支援透過此欄位進行條件式別名設定，類似於 Node.js 的條件匯出。目前僅支援 browser 條件。在上面的範例中，當 Turbopack 目標環境為瀏覽器時，mocha 模組的匯入將會被別名為 mocha/browser-entry.js。

如需更多資訊以及如何從 webpack 遷移至 Turbopack 的指引，請參閱 Turbopack 關於 webpack 相容性的文件。

webpack 載入器

解析別名

On this page