nodeJS优雅写代码:使用别名并配置Webstorm正确识别

最新推荐文章于 2024-06-26 17:57:29 发布

森之千手

最新推荐文章于 2024-06-26 17:57:29 发布

阅读量1.1k

点赞数

分类专栏： webstorm 文章标签： node.js module-alias webstorm

本文链接：https://blog.csdn.net/cjs1534717040/article/details/125783665

版权

webstorm 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、为什么要配置别名

最近尝试用node开发服务端。在引用包路径的方式上发现了一些和普通前端开发不一样的地方，特此写点笔记，给自己也给用得到的同行使用。

我们在开发网页的时候，比如使用vue开发。那么肯定就会涉及到模块化编程。就是将一个大功能分解为N个小功能，每个小功能单独写到一个模块js文件里面，然后export出来，最后在那个大功能的JS里面全部导进去。这样写的好处就不用多说了。

一般来讲，默认的都是相对引用。举个例子，我们要在B模块导入一个A模块，那么在B的开头可以这么写:

import A from '../../../common/module/A'

但是这样写就会有个问题，如果我们的B文件变了位置，这时就要同步修改引用时候的路径，否则就会找不到文件。这就是相对应用带来的问题。因此，我们旧习惯采用以别名形式的绝对引用。

比如，我们在vue.config.js里面配置了路径别名:

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        '@L': resolve('src/utils/log'),
        '@common': resolve('src/common'),
        '@assets': resolve('src/assets'),
        '@china-area-data': resolve('src/common/area')
      }
    }
  }
}

此时我们就可以简单写成:

import A from '@/common/moudule/A'

并且，我们B的位置变换了，也能照常引用，无需修改。

二、在nodeJS服务端配置中使用别名

前端的cli框架配置别名都有现成的配置方法，但是到了nodeJS上面就不同了，需要我们花点心思配置。网上有个哥们写了一个手撸的方式：nodeJS别名映射。感兴趣的可以自行研究一下，还是有点意思的。这里我来说说另一种简单点的方式，采用module-alias。

安装方式很简单:

npm install module-alias --save

目前的最新版本是2.2.2

然后，在package.json里面配置一下_moduleAlias项:

{
  "name": "RouteHubNetworkOptimization",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "_moduleAliases": {
    "@": "."
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "module-alias": "^2.2.2",
    "mysql": "^2.18.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.19"
  }
}

我这里将@配置为. 这个表示@指代的是我们项目的根目录

接着，在我们的入口js里面的最开始引用:

require('module-alias/register')

在入口引用，可以保证所有的项目文件都能以别名方式引入。

三、WebStorm不识别别名

其实实际操作的话，把上面的步骤做完，你的项目就能完美运行了。但是，如果你用webstorm开发的话，可能会发现你的所有以别名引入的连接下面都有一条黄色波浪线警告。并且由于没有识别路径，导致我们无法快速定位代码。

这对于有代码洁癖的人来说，是绝对不能容忍的。其实解决办法还是有的。我们先打开:

默认选项是已禁用或者自动。选择已禁用的话就表明所有的别名都不会被webstorm识别。选择自动的话，会默认读取根目录的webpack.config.js文件里面的别名配置。选择手动，就会去读自己自定义位置名称的文件。自动旁边的问号，会弹出一个浮窗:

我们点击运作方式，可以看见官方的配置方法。

官方的模板大致是这个样子:

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  context: path.resolve(__dirname, './'), 
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('') // 指向根目录
    }
  }
}

于是乎，我们可以自己手动建一个server.config.js，然后往里面加上这些代码。然后手动选择定位到这个文件:

点击应用，然后你的项目的波浪线就没了，并且还能快速定位。

当然，由于我们是自定以这个配置文件的，所以这个文件还可以写上一些别的配置，比如：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

//数据库连接配置
const dbConnectionCfg = {
  airport: {
    host: "127.0.0.1",// 主机地址 （默认：localhost）
    user: "root",//数据库连接账号
    password: "123456",//数据库连接密码
    database: "airport",// 数据库名
    type: 'mySql'
  }
}

/**
 * 用于webstorm辅助识别module-alias里面的别名,没有实际作用。
 * 需要手动指定:语言框架->Javascript->Webpack->手动到当前js文件
 * @type {{resolve: {extensions: string[], alias: {'@': string}}, context: string}}
 */
const pathAlias = {
  context: path.resolve(__dirname, './'), //
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('')
    }
  }
}

module.exports = {
  dbConnectionCfg,
  ...pathAlias
}

至此，教程结束。