支持 resolve alias (#158)

* add resolve in build-config

* comment typo

Author: nighca

build-config.md

@@ -76,31 +76,31 @@ Build config 各个字段的定义。
 
 类型：`object`
 
-页面，在扩展时会覆盖原值。要求是一个 object，key 为页面名（如 `"index"`），value 为一个 object，包含三个字段：`template`, `entries`, `path`
+页面，在扩展时会覆盖原值。要求是一个 object，key 为页面名（如 `"index"`），value 为一个 object，包含三个字段：`template`, `entries`, `path`。
 
 `pages` 的字段描述如下：
 
 - **`pages.(.*)`**
 
     类型：`object`
 
-    一个 object 表示一个页面，包含三个字段：`template`, `entries`, `path`
+    一个 object 表示一个页面，包含三个字段：`template`, `entries`, `path`。
 
     `pages.(.*)` 的字段描述如下：
 
     - **`pages.(.*).template`**
 
         类型：`string`
 
-        页面的模板文件相对于项目根目录的路径，支持 ejs
+        页面的模板文件相对于项目根目录的路径，支持 ejs。
 
     - **`pages.(.*).entries`**
 
         页面上的入口文件列表
 
         * 在只有一个入口文件的情况下，可以直接传入一个字符串，即该入口文件名（如 "index"）；
 
-        * 也可以传入一个数组，数组每一项为一个入口文件名（如 `["sidebar", "index"]`）
+        * 也可以传入一个数组，数组每一项为一个入口文件名（如 `["sidebar", "index"]`）。
 
         `pages.(.*).entries` 类型为以下几种之一：
 
@@ -118,6 +118,28 @@ Build config 各个字段的定义。
 
         在应用中该页面的路径正则（如 `""`、`"^\/financial\/"`），dev server 在请求匹配对应 path 时会返回该页面的内容作为响应。
 
+## **`resolve`**
+
+类型：`object`
+
+对于模块解析行为的配置，在扩展时会合并原值。
+
+`resolve` 的字段描述如下：
+
+- **`resolve.alias`**
+
+    类型：`object`
+
+    配置别名以控制对特定模块或路径的解析行为；如配置 `{ "foo": "src/foo" }`，则模块 `foo` 会被解析到 `<项目根目录>/src/foo`，模块 `foo/bar` 会被解析到 `<项目根目录>/src/foo/bar`
+
+    `resolve.alias` 的字段描述如下：
+
+    - **`resolve.alias.(.*)`**
+
+        类型：`string`
+
+        解析目标的路径（相对于项目根目录），如 `"src/foo"`。
+
 ## **`transforms`**
 
 类型：`object`

preset-configs/config.schema.json

@@ -34,18 +34,18 @@
     },
     "pages": {
       "type": "object",
-      "description": "页面，在扩展时会覆盖原值。要求是一个 object，key 为页面名（如 `\"index\"`），value 为一个 object，包含三个字段：`template`, `entries`, `path`",
+      "description": "页面，在扩展时会覆盖原值。要求是一个 object，key 为页面名（如 `\"index\"`），value 为一个 object，包含三个字段：`template`, `entries`, `path`。",
       "patternProperties": {
         ".*": {
           "type": "object",
-          "description": "一个 object 表示一个页面，包含三个字段：`template`, `entries`, `path`",
+          "description": "一个 object 表示一个页面，包含三个字段：`template`, `entries`, `path`。",
           "properties": {
             "template": {
               "type": "string",
-              "description": "页面的模板文件相对于项目根目录的路径，支持 ejs"
+              "description": "页面的模板文件相对于项目根目录的路径，支持 ejs。"
             },
             "entries": {
-              "description": "页面上的入口文件列表\n* 在只有一个入口文件的情况下，可以直接传入一个字符串，即该入口文件名（如 \"index\"）；\n* 也可以传入一个数组，数组每一项为一个入口文件名（如 `[\"sidebar\", \"index\"]`）",
+              "description": "页面上的入口文件列表\n* 在只有一个入口文件的情况下，可以直接传入一个字符串，即该入口文件名（如 \"index\"）；\n* 也可以传入一个数组，数组每一项为一个入口文件名（如 `[\"sidebar\", \"index\"]`）。",
               "oneOf": [{
                 "type": "string"
               }, {
@@ -61,6 +61,22 @@
         }
       }
     },
+    "resolve": {
+      "type": "object",
+      "description": "对于模块解析行为的配置，在扩展时会合并原值。",
+      "properties": {
+        "alias": {
+          "type": "object",
+          "description": "配置别名以控制对特定模块或路径的解析行为；如配置 `{ \"foo\": \"src/foo\" }`，则模块 `foo` 会被解析到 `<项目根目录>/src/foo`，模块 `foo/bar` 会被解析到 `<项目根目录>/src/foo/bar`",
+          "patternProperties": {
+            ".*": {
+              "type": "string",
+              "description": "解析目标的路径（相对于项目根目录），如 `\"src/foo\"`。"
+            }
+          }
+        }
+      }
+    },
     "transforms": {
       "type": "object",
       "description": "构建过程中的转换配置，在扩展时会合并原值，要求是一个 object。key 为文件后缀名，value 为转换信息。转换信息支持两种格式：\n1. 直接使用 transformer 名，如 \"css\"、\"less\"\n2. 一个 object，包含两个字段：`transformer` 与 `config`。对于不同的 transformer，我们可以通过与 `transformer` 平级的 `config` 字段对 transformer 的行为进行配置。",

preset-configs/default.json

@@ -14,6 +14,9 @@
       "path": ""
     }
   },
+  "resolve": {
+    "alias": {}
+  },
   "transforms": {
     "js": "babel",
     "css": "css",

src/utils/build-conf.ts

@@ -75,6 +75,11 @@ export type PagesInput = Record<string, PageInput>
 
 export type Pages = Record<string, Page>
 
+export interface Resolve {
+  /** 别名映射表，key 为要匹配的模块或路径，value 为（被实际使用的）目标路径 */
+  alias: Record<string, string>
+}
+
 export interface TransformObject {
   transformer: Transform
   config?: unknown
@@ -110,6 +115,7 @@ export interface BuildConfigInput {
   distDir?: string
   entries?: Entries
   pages?: PagesInput
+  resolve?: Resolve
   transforms?: TransformsInput
   /** 注入到代码中的环境变量 */
   envVariables?: EnvVariables,
@@ -123,12 +129,14 @@ export interface BuildConfigInput {
 
 export interface BuildConfig extends Required<BuildConfigInput> {
   pages: Pages
+  resolve: Resolve
   transforms: Transforms
 }
 
 /** merge two config content */
 function mergeConfig(cfg1: BuildConfigInput, cfg2: BuildConfigInput): BuildConfigInput {
   return extend(cfg1, cfg2, {
+    resolve: extend(cfg1.resolve, cfg2.resolve) as Resolve,
     transforms: extend(cfg1.transforms, cfg2.transforms) as TransformsInput,
     envVariables: extend(cfg1.envVariables, cfg2.envVariables),
     optimization: extend(cfg1.optimization, cfg2.optimization) as Optimization,
@@ -265,7 +273,7 @@ function normalizeTransforms(input: TransformsInput): Transforms {
 
 function normalizeConfig({
   extends: _extends, publicUrl: _publicUrl, srcDir, staticDir, distDir, entries, pages: _pages,
-  transforms: _transforms, envVariables, optimization, devProxy,
+  resolve, transforms: _transforms, envVariables, optimization, devProxy,
   deploy, targets, test, engines
 }: BuildConfigInput): BuildConfig {
   if (_extends == null) throw new Error('Invalid value of field extends')
@@ -275,6 +283,7 @@ function normalizeConfig({
   if (distDir == null) throw new Error('Invalid value of field distDir')
   if (entries == null) throw new Error('Invalid value of field entries')
   if (_pages == null) throw new Error('Invalid value of field pages')
+  if (resolve == null) throw new Error('Invalid value of field resolve')
   if (_transforms == null) throw new Error('Invalid value of field transforms')
   if (envVariables == null) throw new Error('Invalid value of field envVariables')
   if (optimization == null) throw new Error('Invalid value of field optimization')
@@ -288,7 +297,7 @@ function normalizeConfig({
   const transforms = normalizeTransforms(_transforms)
   return {
     extends: _extends, publicUrl, srcDir, staticDir, distDir, entries, pages,
-    transforms, envVariables, optimization, devProxy,
+    resolve, transforms, envVariables, optimization, devProxy,
     deploy, targets, test, engines
   }
 }

src/webpack/index.ts

@@ -28,6 +28,11 @@ export async function getConfig(): Promise<Configuration> {
   const isProd = getEnv() === Env.Prod
   const isDev = getEnv() === Env.Dev
 
+  const resolveAlias = mapValues(
+    buildConfig.resolve.alias,
+    path => abs(path)
+  )
+
   let config: Configuration = {
     target: 'web', // TODO: 使用 `browserslist:...` 可能合适? 详情见 https://webpack.js.org/configuration/target/
     mode: getMode(),
@@ -40,7 +45,8 @@ export async function getConfig(): Promise<Configuration> {
         'node_modules',
         nodeModulesOfBuilder,
         abs('node_modules')
-      ]
+      ],
+      alias: resolveAlias
     },
     resolveLoader: {
       modules: [