Custom Resolve Alias Guide

Rocketact Custom Resolve Alias Guide

Rocketact 自定义别名配置指北

目前为临时解决方式，后续考虑写成自定义组件

Custom Rocketact Plugin

新建自定义 Rocketact 插件，放在项目指定目录下，例如 scripts，新建文件 custom-rocketplugin.js，内容如下：

const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = (api) => {
  api.chainWebpack((webpackChain) => {
    webpackChain.resolve.alias.set("@", resolve("../src")).end(); // 找到对应目录即可
    // webpackChain.resolve.alias.set("@components", resolve("../src/components")).end(); // 新增 alias 以此类推
  });
};

修改 package.json 文件，追加如下配置：

rocketactPlugins": [
  "./scripts/custom-rocketactplugin"
]

截至目前为止，Rocketact 已经完成 Webpack 别名的配置，start & build 都可以完成正常的构建。

Typescript tsconfig

为了更好的开发体验，仅仅完成上面配置，在开发过程中还是会遇到编译不识别的问题，那么修改 tsconfig.json 增加 compilerOptions 中 paths 即可，配置如下：

"paths": {
  "@/*": ["src/*"]
}

配置完成。