Webpack 别名使我的代码保持健全

引用错误会让开发人员看起来很糟糕

如果你问我在基础 Web 开发中最常见的错误是什么，我会毫不犹豫地告诉你，引用错误是其中最严重的错误之一。无论是变量还是包导入，我都遇到过很多问题，也帮助过其他经常犯这类错误的开发者。特别是对于包导入，我希望每次重构和改进文件时，都不必再更改所有路径位置。

通过下面的一些示例代码，您可能熟悉它的样子。

    import { UserCard } from '../../../components';

    import { apiServices, themeServices } from '../../../services';

    import { objUtil, dateUtil } from '../../../utils';

当你移动文件或批量更新应用中的引用时会发生什么？你必须费力地检查每个引用是否正确。接下来，你还必须确认，如果编译器配置错误，无法识别错误，你的页面不会崩溃或运行。更糟糕的是……你意外地引用了另一个具有相同导出名称的文件。结果，你直到代码发布到生产环境才注意到，而现在客户打电话来抱怨功能停止运行了。

别名来救援

Webpack 通过提供“别名”功能解决了这些问题。别名是一种让 Webpack 知道在哪里找到代码的方法，它通过提供一个单词或字符来表示代码所在位置的部分引用。一旦 Webpack 知道了这一点，就可以在开发过程中编译代码或构建最终包时正确地解析代码。这不仅对 JavaScript 和 TypeScript 有用，对 CSS 也同样有用。

为了将此功能添加到我们的代码中，我们需要首先在 webpack 中设置“resolve”。您的代码最终可能看起来类似于以下内容：

    const path = require('path');

    module.exports = {
      //...
      resolve: {
        extensions: ['js', 'jsx', 'ts', 'tsx'],
        alias: {
          '@': path.resolve(__dirname, 'src'),
          '@components': path.resolve(__dirname, 'src/components'),
          '@utilities': path.resolve(__dirname, 'src/utilities')
        }
      }
      //...
    };

只要有实际用例，你可以使用任意数量的别名。总的来说，只使用“@”字符作为别名来引用“src”文件夹非常容易，但你可以为任何你想要的别名路径创建任何名称。一旦我们将 webpack 配置修改为类似于上面的代码，我们之前的导入现在看起来可能类似于这样：

    import { UserCard } from '@/components';

    import { apiServices, themeServices } from '@/services';

    import { objUtil, dateUtil } from '@/utils';

好多了！现在，当你重构代码时，你将始终引用你想要的包。

使用 Babel 和 TypeScript

如果您结合使用 Babel、ESLint 或 TypeScript 中的 webpack 来解析代码，则可能需要更新它们的配置文件。这些文件可能是：.babelrc、.babel.json、.eslintrc.js、tsconfig.json、config.ts 等，具体取决于您的设置方式。在解析别名时，您可能需要在这些文件中进行一些修改，而不是使用 webpack.config.js。

巴别塔

    // .babelrc
    // npm i babel-plugin-module-resolver -D

    {
      "plugins": [
        "module-resolver",
        {
          root: ["./src"],
          alias: {
            @: "./src",
          }
        }
      ]
    }

ESLint

    // .eslintrc.js
    // npm i eslint-import-resolver-alias -D

    const path = require('path');

    module.exports = {
      //...
      settings: {
        'import/resolver': {
          alias: {
            map: [['@', path.resolve(__dirname, 'src')]],
          },
        },
      },
    };

TypeScript

    // tsconfig.json
    // npm i tsconfig-paths-webpack-plugin -D

    {
      //...
      "compilerOptions": {
        "baseUrl": "src",
        "paths": {
          "@/*": ["*"]
        }
      }
    }

如果您不想在 TypeScript 和 Webpack 中解析别名，这里有一个示例，我们同时使用 TypeScript 和 Webpack 配置文件，但使用包安装，将别名保留在 tsconfig.json 中。另请注意，如果您使用 Webpack 并在 Webpack 中定义别名，通常只需要在 .babelrc 文件中配置别名。以下示例中将别名移到 TypeScript 和 Babel 配置文件中的总体目标是保持代码的 DRY 原则并集中在一个位置。这样可以避免更新一个配置后意外忘记在其他位置更新。

    // webpack.config.js
    // npm i tsconfig-paths-webpack-plugin -D

    const path = require('path');
    const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

    module.exports = { 
      //... 
      resolve: {
        extensions: ['js', 'jsx', 'ts', 'tsx'],
        plugins: [
          new TsconfigPathsPlugin()
        ],
      } 
    };

将此代码与您的 TypeScript“tsconfig.json”别名设置结合起来，您就可以开始了！

概括

使用别名来接管变量和文件导入的主要引用，会让开发者看起来更优秀。你的代码会更简洁，文件重构和合并时出错的可能性也会大大降低。自从我发现了别名之后，我确保几乎每个我负责的项目都使用了别名。我也鼓励你在将代码发布到任何地方之前，考虑一下别名是否适合你，这样可以避免再出现需要处理或担心的 bug。

如果您觉得本文有帮助或有用，请分享💓、🦄或🔖。谢谢！

鏂囩珷鏉ユ簮锛�https://dev.to/mmcshinsky/webpack-aliases-keep-my-code-sane-3c3e