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

• 2021 年 2 月 19 日
• 笔记
• alias, craco, create-react-app, webpack, 前端工程化, 开发工具, 总结, 路径别名

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 环境

• 如果是个人配置 eslint , 则需要 增加两个插件 eslint-plugin-import eslint-import-resolver-alias， //www.npmjs.com/package/eslint-import-resolver-alias

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

注意

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