解決nodejs koa express以及vue,nuxt項(xiàng)目中使用別名映射vscode不提示的問(wèn)題,兼容webpack的@和best-require 的:xxx 別名映射

2019-11-16    seo達(dá)人

nodejs中使用別名映射,兼容webpack的@和best-require 的:xxx 別名映射

項(xiàng)目地址: https://github.com/langyuxiansheng/biu-server-admin



寫在前面

研究了很久,找了很多資料發(fā)現(xiàn)都沒(méi)有,只好自己去想辦法,查資料.才弄好的,凌晨發(fā)布的,轉(zhuǎn)載請(qǐng)注明出處.

在做nodejs項(xiàng)目開發(fā)的時(shí)候,你是不是也在為

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');



這樣的寫法而困擾;



那看完這篇文章,從此之后就可以告別這個(gè)煩惱了;



感謝一下 best-require 這個(gè)模塊包的作者,不然還需要自己去寫這個(gè)

npmjs 鏈接 https://www.npmjs.com/package/best-require

github 鏈接 https://github.com/yuezhihan/best-require



不廢話了,進(jìn)入正題 往下看:

  1. 安裝庫(kù) best-require 進(jìn)行別名映射





    npm i best-require --save


  2. 映射別名. 實(shí)例在本項(xiàng)目中 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')

    });



    //運(yùn)行服務(wù)

    require('./src/bin/Server').run();


  3. 設(shè)置 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 插件 并在設(shè)置中配置setting.json



    vscode 中的設(shè)置,setting.json



    workspaceRoot 是當(dāng)前的工作空間,就是當(dāng)前編輯器打開的目錄.



    配置如下





    {

        "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,試試看吧!

    作者的目錄結(jié)構(gòu)









    vue中使用







    后續(xù)更新

    nodejs中使用sequelize的model映射,這樣就解決了沒(méi)得提示的煩惱了,讓你的效率提升2個(gè)檔次

    寫在后面

    如果你遇到難題或者有疑問(wèn),有好的建議請(qǐng)留言反饋.

    這種提示以及Ctrl + 鼠標(biāo)左鍵的跳轉(zhuǎn),只針對(duì) .js 的文件, .vue的沒(méi)試過(guò).這個(gè)也只是為了解決 js方法映射后沒(méi)提示的問(wèn)題.


分享本文至:

日歷

鏈接

個(gè)人資料

存檔