模块导入
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;
})
}