[Next.js] 引用路径使用别名

next.config.js 添加 webpack 对别名的支持

作用于代码构建， (Next.js 9.4+ 不需要配置这个)

const path = require('path');
module.exports = {
    webpack: (config) => {
        config.resolve.alias['@'] = path.resolve(__dirname);
        config.resolve.alias['@@'] = path.resolve(__dirname, './components');
        return config;
    }
};

tsconfig.json 添加 TypeScript 对别名的支持

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

node 代码对别名的支持（参考文档）

1. 安装插件 module-alias

   npm i --save module-alias
   

2. package.json 中添加别名配置

   "_moduleAliases": {
       "@": "."
       "@@": "./components",
   }
   

3. node 脚本中使用方法

   require('module-alias/register'); //建议写在脚本最上方
   const nextI18next = require('@/utils/i18n');
   

如果不想动 package.json 或者别名路径中带有变量，可以这么配置：

const moduleAlias = require('module-alias')
const path = require('path');
const rootPath = path.resolve(__dirname, '../');

moduleAlias.addAliases({
    '@': rootPath,
    '@@': path.resolve(rootPath, 'components')
})

把上面的代码封装到一个 js 文件中，需要的地方在代码顶部 require 这个文件即可。

编辑器（WebStorm/PhpStorm）对别名的支持

常用解决方案是浏览器读取webpack配置文件 webpack.config.js，从而支持 alias 解析。

但是 Next.js 内部对 webpack 配置做了封装，项目中找不到传统的 webpack.config.js。

因此解决方案是为编辑器建一个特殊的webpack 配置文件，专门用于alias 解析。

1. 新建文件 alias.config.js

   const path = require('path');
   
   module.exports = {
       resolve: {
           alias: {
               '@': path.resolve(__dirname),
               '@@': path.resolve(__dirname, './components')
           }
       }
   };
   

2. 修改编辑器webpack配置

   Settings -> Language & Framework -> JavaScript -> Webpack -> webpack configuration file 选择 alias.config.js

SCSS 文件中使用别名

如果js文件中路径是 import '@/xxx';

scss 文件中路径就是 @import '~@/xxx';

别名前面多加一个 ~