zoukankan      html  css  js  c++  java
  • 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环境,有时只需要配置一项即可
  • 相关阅读:
    ./ 和../ 和 / 区别
    思想笔记-03
    java项目学习
    OA办公管理系统最全设计
    Axure RP 7.0注册码
    Java循环和数组练习题:打印素数升级版
    C语言练习题:水仙花数
    Java与C语言的区别——含面向对象介绍
    .NET Core C# 中级篇2-7 文件操作
    ASP.NET Core Basic 1-1 WebHost与项目配置
  • 原文地址:https://www.cnblogs.com/pomelott/p/14418191.html
Copyright © 2011-2022 走看看