webpack + ts 配置路径别名无死角方法总结

webpack + ts 配置路径别名总结

自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强。但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can’t find module xxx。总结下来,如果想要完全解决这个问题需要考虑以下两方面:

概述

语法上的正确性

  • 此处主要是通过构建工具,如webpack、parcel、rollup等,在编译时将路径的别名进行替换、拼接。从而使得别名的引用能够映射为正确的路径。

环境的正确性

  • eslint 环境:如果使用的js,未使用ts。则需要保证 eslint 的路径别名配置正确,或者更改报警级别(通常不建议这么做)
  • typescript 环境:如果使用的是ts,多数情况下需要对 tsconfig.json 进行配置。

注:以上两种环境并不一定需要同时配置,例如使用成熟的第三方脚手架时,往往只需要配置其中一种(大多数一其中的一种为基础,自动同步)

具体应对

保证语法的正确性

  • 原理则是通过类似于 loader 的工具,将别名与真实路径进行替换。此处以 webpack.resolve.alias 进行配置,按照官方 API使用即可 webpack.resolve.alias
  • 当无法直接修改 webpack.config.js,使用 第三方配置工具时候 (此处以craco 配置 create-react-app 为例), :
// craco.config.js
const path = require('path');
module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      let {src} = webpackConfig.resolve.alias;

      webpackConfig.resolve.alias = Object.assign(webpackConfig.resolve.alias, {
        '@': src,
        '@components': path.resolve(src, 'components')
      })
      return webpackConfig;
    }
  }
}

保证环境的正确性:

typescript 环境

  • tsconfig.json: 需要为 ts 声明路径映射表
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "@typings/*": ["src/typings/*"],
        "@components/*": ["src/components/*"],
        "@style/*": ["src/style/*"],
        "@utils/*": ["src/utils/*"],
        "@router/*": ["src/router/*"],
        "@store/*": ["src/store/*"],
      }
    }
  }
  • 此处需要注意,若使用的是第三方配置工具,则可能会复写 tsconfig.json, 当发现修改的配置未生效时大概率会是这种情况,需要新建文件,并添加 extends 字段:
  • tsconfig.extend.json 如下:
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "@typings/*": ["src/typings/*"],
        "@components/*": ["src/components/*"],
        "@style/*": ["src/style/*"],
        "@utils/*": ["src/utils/*"],
        "@router/*": ["src/router/*"],
        "@store/*": ["src/store/*"],
      }
    }
  }
  • 为 tsconfig.json 添加 extends 字段:
{
  "extends": "./tsconfig.extend.json"
}

eslint 环境

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: [
        ['@', './src/']
      ]
    }
  }
};

注意

  • 当把需要配置的工作完成后,需要关闭 vscode 并重新启动,才能生效。
  • ts环境与es环境,有时只需要配置一项即可
上一篇:git 初始化配置


下一篇:3.2alias标签解析 ~ 3.4嵌入式Beans标签解析