模块导入

Turbopack 原生支持 CJS、ESM 和部分支持 AMD 模块导入。

Turbopack 会构建应用代码,所以模块导入不会被转换为浏览器的 ESM 模块。你可以在构建代码 vs 原生ESM章节了解原因。

CommonJS

Turbopack 原生支持 require 语法。

const { add } = require('./math');
 
add(1, 2);

Turbopack 还支持动态 require() 语法,因此你可以导入动态命名的资源:

const imgName = getRandomImgName();
 
const img = require(`./images/${imgName}.png`);

ESM

通过 import 语法导入模块也是原生支持的,其中包括导入静态资源和 import type 导入类型:

import img from './img.png';
 
import type { User } from '../server/types';
 
import { z } from 'zod';

动态导入

Turbopack 支持使用 import() 动态导入:

const getFeatureFlags = () => {
  return import('/featureFlags').then(mod => {
    return mod.featureFlags;
  })
}