如何在Playwright中解析测试目录外的相对路径？

场景回顾 #

当前项目目录结构：

root
> lib
>> collection.js
> tests
>> folder1
>>> collection.spec.js

现有导入语句：

import * as Collection from '../../lib/collection.js'

想要改成：

import * as Collection from '@/lib/collection.js'
// 或
import * as Collection from 'lib/collection.js'

不同环境的配置方案 #

1. 纯Node.js项目（ES Modules/CommonJS） #

ES Modules（Node.js 16.14.0+）

在项目根目录的package.json中添加imports字段：

{
  "imports": {
    "@/lib/*": "./lib/*"
    // 若要直接用`lib/xxx`格式，可改为 "lib/*": "./lib/*"
  }
}

配置后即可使用目标导入语句：

import * as Collection from '@/lib/collection.js'
// 或对应lib/xxx格式：import * as Collection from 'lib/collection.js'

CommonJS（低版本Node.js）

借助module-alias包实现：

• 安装依赖：npm install module-alias --save-dev
• 在项目入口文件顶部添加：

  const moduleAlias = require('module-alias');
  // 映射@前缀到根目录
  moduleAlias.addAlias('@', __dirname);
  // 或直接映射lib文件夹
  moduleAlias.addAlias('lib', __dirname + '/lib');
  

2. Webpack项目 #

在webpack.config.js中配置resolve.alias：

const path = require('path');

module.exports = {
  // 其他配置项...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './'),
      'lib': path.resolve(__dirname, './lib')
    }
  }
};

配置完成后重启Webpack服务即可生效。

3. Vite项目 #

在vite.config.js中配置resolve.alias：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './'),
      'lib': path.resolve(__dirname, './lib')
    }
  }
});

重启开发服务后即可使用目标导入路径。

4. TypeScript项目 #

除了对应打包工具的别名配置，还需在tsconfig.json中添加paths字段让TS编译器识别别名：

{
  "compilerOptions": {
    // 其他配置项...
    "baseUrl": "./",
    "paths": {
      "@/*": ["*"],
      "lib/*": ["lib/*"]
    }
  }
}

额外注意事项 #

• 配置完成后务必重启开发服务或打包工具，确保配置生效。
• 若涉及测试文件（如collection.spec.js），部分测试框架需单独配置别名，比如Jest要在jest.config.js中添加：

  module.exports = {
    moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/$1',
      '^lib/(.*)$': '<rootDir>/lib/$1'
    }
  };
  

内容的提问来源于stack exchange，提问作者Tadas V.