如何通过package.json配置简化JavaScript项目的导入路径？

当然可以通过配置实现根路径导入，不用反复写../或./，不同项目环境的配置方式略有不同，以下是常见场景的实现方案：

Node.js ESM 环境 #

直接在package.json中添加imports字段，将source目录下的子目录映射为简短的别名：

{
  "imports": {
    "#utils/*": "./source/utils/*",
    "#components/*": "./source/components/*",
    "#core": "./source/core/index.js"
  }
}

配置后即可这样导入：

import functions from '#utils/functions';
import Button from '#components/Button';
import coreModule from '#core';

Vite 项目 #

Vite支持在package.json中直接配置路径别名，添加vite字段即可：

{
  "vite": {
    "resolve": {
      "alias": {
        "@": "./source"
      }
    }
  }
}

之后导入时用@指代source目录：

import functions from '@/utils/functions';
import Layout from '@/layout/Layout';

Webpack 项目 #

Webpack需在webpack.config.js中配置resolve.alias，若配合TypeScript使用，还需在tsconfig.json中同步配置paths以保证语法提示正常：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["source/*"]
    }
  }
}

// webpack.config.js
const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'source')
    }
  }
};

CommonJS 项目 #

若项目使用CommonJS规范，可借助module-alias包实现：

1. 安装依赖：npm install module-alias --save
2. 在package.json添加别名配置：

{
  "_moduleAliases": {
    "@": "./source"
  }
}

3. 在项目入口文件顶部注册别名：

require('module-alias/register');

之后即可用@导入文件：

const functions = require('@/utils/functions');

内容的提问来源于stack exchange，提问作者Bruno Peixoto