解决nodejs koa express以及vue,nuxt项目中使用别名映射vscode不提示的问题,兼容webpack的@和best-require 的:xxx 别名映射,sequelize没提示

nodejs中使用别名映射,兼容webpack的@和best-require 的:xxx 别名映射和sequelize没提示

项目地址: https://github.com/langyuxiansheng/biu-server-admin

写在前面

  1. 研究了很久,找了很多资料发现都没有,只好自己去想办法,查资料.才弄好的,凌晨发布的,转载请注明出处.
  2. 在做nodejs项目开发的时候,你是不是也在为
require('./posts');
require('./controllers/posts');
require('../controllers/posts');
require('../../controllers/posts');
require('../../../apis/controllers/posts');

或者

require(ROOT_PATH + '/application/apis/controllers/posts');
// other require()...
require(ROOT_PATH + '/application/apis/controllers/users');
require(ROOT_PATH + '/application/apis/controllers/products');
require(ROOT_PATH + '/application/apis/services/rest');
require(ROOT_PATH + '/application/apis/config');

这样的写法而困扰;

那看完这篇文章,从此之后就可以告别这个烦恼了;

感谢一下 best-require 这个模块包的作者,不然还需要自己去写这个
npmjs 链接 https://www.npmjs.com/package/best-require
github 链接 https://github.com/yuezhihan/best-require

不废话了,进入正题 往下看:

1. 安装库 best-require 进行别名映射

在这里插入图片描述

npm i best-require --save

2. 映射别名. 实例在本项目中 server/index.js 中

在这里插入图片描述

const path = require('path');
const ROOT_PATH = process.cwd();
const SRC_PATH = path.join(ROOT_PATH, `/server/src`);
console.log(ROOT_PATH, SRC_PATH);
//映射目录别名
require('best-require')(ROOT_PATH, {
    root: ROOT_PATH,
    src: SRC_PATH,
    controllers: path.join(SRC_PATH, '/controllers'),
    models: path.join(SRC_PATH, '/models'),
    routes: path.join(SRC_PATH, '/routes'),
    crawlers: path.join(SRC_PATH, '/crawlers'),
    services: path.join(SRC_PATH, '/services'),
    middleware: path.join(SRC_PATH, '/middleware'),
    lib: path.join(SRC_PATH, '/lib'),
    config: path.join(SRC_PATH, '/config'),
    logs: path.join(SRC_PATH, '/logs')
});

//运行服务
require('./src/bin/Server').run();

3. 设置 jsconfig.json

在这里插入图片描述

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["client/*"],
            ":root/*": ["*"],
            ":config/*": ["server/src/config/*"],
            ":lib/*": ["server/src/lib/*"],
            ":services/*": ["server/src/services/*"],
            ":controllers/*":["server/src/controllers/*"],
            ":models/*": ["server/src/models/*"],
            ":routes/*": ["server/src/routes/*"],
            ":crawlers/*": ["server/src/crawlers/*"],
            ":middleware/*": ["server/src/middleware/*"],
            ":logs/*": ["server/src/logs/*"]
        }
    },
    "include": ["server/**/*","client/**/*"],
    "exclude": [
        "node_modules",
        "nuxt-dist",
        "server-dist"
    ]
}

4. vscode要安装 path-intellisense 插件 并在设置中配置setting.json

在这里插入图片描述
vscode 中的设置,setting.json

workspaceRoot 是当前的工作空间,就是当前编辑器打开的顶级目录.
在这里插入图片描述
配置如下
在这里插入图片描述

{
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/client",
        ":root": "${workspaceRoot}",
        ":lib": "${workspaceRoot}/server/src/lib",
        ":controllers": "${workspaceRoot}/server/src/controllers",
        ":models": "${workspaceRoot}/server/src/models",
        ":routes": "${workspaceRoot}/server/src/routes",
        ":crawlers": "${workspaceRoot}/server/src/crawlers",
        ":services": "${workspaceRoot}/server/src/services",
        ":middleware": "${workspaceRoot}/server/src/middleware",
        ":config": "${workspaceRoot}/server/src/config",
        ":logs": "${workspaceRoot}/server/src/logs",
    }
}

5. 重启vscode,试试看吧!

作者的目录结构
在这里插入图片描述

在这里插入图片描述

vue中使用

在这里插入图片描述

后续更新

  1. nodejs中使用sequelize的model映射,这样就解决了没得提示的烦恼了,让你的效率提升2个档次

写在后面

  1. 如果你遇到难题或者有疑问,有好的建议请留言反馈.
  2. 这种提示以及Ctrl + 鼠标左键的跳转,只针对 .js 的文件, .vue的没试过.这个也只是为了解决 js方法映射后没提示的问题.
补充一个在vscode中用sequelize没代码提示的坑.

要这样引用才对

const Sequelize = require('sequelize/index');

使用如果sequelize,没提示,那说明可能是require('sequelize);的时候后面没加index…

没加之前
在这里插入图片描述
在这里插入图片描述
加了之后
在这里插入图片描述
在这里插入图片描述

写着最后

如果按照上面的都还没得提示的话,还需要运行一个命令

npm i @types/sequelize -D
发布了70 篇原创文章 · 获赞 44 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览