Node.js配置别名alias的两种方法

最新推荐文章于 2025-02-24 13:57:24 发布

原创最新推荐文章于 2025-02-24 13:57:24 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #nodejs #webpack #javascript #node.js

Node.js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在Node.js中通过webpack和module-alias两种方式配置文件别名，以简化模块导入路径，提升开发效率。包括环境准备、配置步骤和IDE路径提示的设置，适合前端与后端开发者参考。

Node.js配置别名alias的两种方法

什么是别名？

// import xxx from '../../../xxx';
import xxx from '@/xx/xx/xxx';

可以省去 ../../../xxx ，直接从配置的目录开始找文件

环境准备

Node.js如果下载过慢，可以从淘宝镜像下载

第一种：webpack

使用 webpack 进行打包并且在 webpack.config.js 配置里面配置 alias

配置 webpack.config.js

const path = require('path');
const resolve = path.resolve;

module.exports = {
  entry: './src/index.js',             // 入口文件
  output: {
    filename: 'bundle.js',			   // 输出文件名
    path: resolve(__dirname, 'dist')   // 输出文件路径
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')   // 别名设置
    }
  }
}

之后在目录 src 下面创建 index.js 和 test.js

index.js

import test from '@/test';	// 这里的 @/xxx 相当于 src/xxx
console.log(test);

test.js

export default 'test';	// 随便导出什么内容

之后控制台输入 webpack 编译之后运行 node dist/bundle.js 即可输出结果 test

第二种：module-alias

控制台输入 npm install module-alias 或 yarn add module-alias 安装 module-alias

然后进入 package.json 加入如下配置：

"_moduleAliases": {
  "@": "src"
}

（如果使用 TypeScript 的话，可以用 tsc 直接编译。但是清注意这里的 src 应改成打包后的目录比如 dist build 等）

之后在主入口文件头部引用 module-alias/register 如：

index.js

require('module-alias/register');
const test = require('@/test');
console.log(test);

test.js

module.exports = 'test';

之后控制台运行 node src/index.js 即可输出结果 test

IDE 路径提示设置

虽然打包运行可以通过别名，但是 IDE 并不认识

我们需要在项目根目录新建文件 jsconfig.json （使用 TypeScript 则是 tsconfig.json ）
在 compilerOptions 加入：

"baseUrl": "./src",
"paths": {
  "@/*": ["*"]
}

文件最后如下：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

总结

安装环境之后两种办法：

修改 webpack 配置以支持别名打包
使用 module-alias 库进行编译运行