It's all about
connecting the dots

识别webpack路径别名(alias)

假设项目使用了webpack,且配置了一些路径别名,如果我们在项目中引用文件时使用webpack配置里配的路径别名,对提高编译速度是会有一定的加成的,效果虽然没实测过,但是肯定不会效果拔群,属于如果方便的话能用就用吧,不方便的话就算了,没必要为了方便使用这个功能特意去换编辑器/IDE。

一、案例

回到正题,假设你的webpack别名配置如下:

const resolve = (tempPath) => path.join(paths.appSrc, '../', tempPath)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
    return {
        src: paths.appSrc,
        '@': resolve('src'),
        '@api': resolve('src/api'),
        '@assets': resolve('src/assets'),
        '@img': resolve('src/assets/img'),
        '@css': resolve('src/assets/css'),
        '@component': resolve('src/components'),
        '@constants': resolve('src/constants'),
        '@containers': resolve('src/containers'),
        '@models': resolve('src/models'),
        '@routes': resolve('src/routes'),
        '@tests': resolve('src/tests'),
        '@utils': resolve('src/utils'),
    };
}

二、IDEA方案

如果你和我一样,主用的是IDEA,可以直接打开IDEA配置,在搜索栏搜”webpack”,然后就会看到一个可以选择webpack配置文件的地方,点击选中webpack配置文件后保存后,IDEA就能自动识别别名路径了。因为太过简单所以不贴图了。

webstorm我没装,不过既然是同一个公司出的,大概率也会支持。

三、vscode方案

但是我们的团队成员大部分是用vscode的,所以要按下面的方式处理(只需要修改代码配置,不用每个开发同学都去设置vscode的配置项,所以比较好推行)。

先打开项目根目录,新建jsconfig.json文件,填入如下内容(根据你的webpack实际配置的别名来修改):

{
    "compilerOptions": {
        "jsx": "react",
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "@api/*": [
                "src/api/*"
            ],
            "@assets/*": [
                "src/assets/*"
            ],
            "@img/*": [
                "src/assets/img/*"
            ],
            "@css/*": [
                "src/assets/css/*"
            ],
            "@component/*": [
                "src/components/*"
            ],
            "@constants/*": [
                "src/constants/*"
            ],
            "@containers/*": [
                "src/containers/*"
            ],
            "@models/*": [
                "src/models/*"
            ],
            "@routes/*": [
                "src/routes/*"
            ],
            "@tests/*": [
                "src/tests/*"
            ],
            "@utils/*": [
                "src/utils/*"
            ]
        }
    }
}

这样就ok了。需要注意的时,当用vscode打开一个目录时,这个文件需要在打开目录的顶层才有效。如果你的代码仓库含有多个子项目,你在子项目A的根目录下配置了jsconfig.json文件的话,用vscode直接打开总项目是没用的,需要用vscode直接打开子项目A对应的目录方能生效。

赞(4) 打赏
转载需注明来源并给出来源页链接:峰间的云 » 识别webpack路径别名(alias)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏