Question

Parcel 的解析器实作了一个 node_modules 解析的改良版演算法。

模组解析

除了标準演算法以外，所有 Parcel 支援的资源类型也都会被解析。

模组解析可以相对于：

• 进入点根目录：指定给 Parcel 作为进入点的目录，有多个进入点时则为共享根目录（共同父目录）。
• 套件根目录：node_modules 中最接近模组根目录的路径。

绝对路径

/foo 会将 foo 解析为相对于进入点根目录的路径。

~ 波浪号路径

~/foo 会将 foo 解析为最接近的套件根目录，找不到时则为进入点根目录。

Glob 档案路径

Glob 可以一次引入多个或全部档案（assets/*.png），也可引入多个目录中的档案（/assets/**/*）。

下面範例打包了一个目录中的所有 png 档案并回传正式的 URL。

import foo from "/assets/*.png";
// {
//   'file-1': '/file-1.8e73c985.png',
//   'file-2': '/file-1.8e73c985.png'
// }

package.json 中的 browser 设定

如果一个套件含有 package.browser 栏位，则 Parcel 会以此设定取代 package.main。

别名

Parcel 支援以 package.json 中的 alias 栏位作为别名。

下列範例展示了如何将 react 对应至 preact，以及一些不存在于 node_modules 中的本地自订模组。

// package.json
{
  "name": "some-package",
  "devDependencies": {
    "parcel-bundler": "^1.7.0"
  },
  "alias": {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    "local-module": "./custom/modules"
  }
}

因 Parcel 或其他三方工具及扩充套件都可能使用到别名，请避免在别名中使用任何特殊字元，如：

• ~ 被 Parcel 用来解析 波浪号路径
• @ 被 npm 用来解析 npm 组织

我们建议你明确的定义你的别名，定义别名时请指定副档名，否则将会由 Parcel 自行猜测。範例请见 JavaScript 中命名过的 Export 一节。

常见问题

JavaScript 中命名过的 Export

别名的对应可以套用在许多资源类型上，但不适用于 JavaScript 中命名过的 Export (named export)。若你想要使用的话可试着这幺做：

// package.json
{
  "name": "some-package",
  "alias": {
    "ipcRenderer": "./electron-ipc.js" // 指定副档名
  }
}

并在拥有别名的档案中重新汇出一次：

// electron-ipc.js
module.exports = require('electron').ipcRenderer

Flow 的绝对与波浪号路径解析

当使用绝对路径或波浪号路径解析时，你必须设定 Flow 的 module.name_mapper 功能。

假设专案有下列结构：

package.json
.flowconfig
src/
  index.html
  index.js
  components/
    apple.js
    banana.js

指定 src/index.html 为进入点后，因其根目录为 /src，若要将下列程式正确的对应，我们需要 Flow 将 /conponents/apple 替换为 src/components/apple。

// index.js
import Apple from '/components/apple'

将下列设定加入 .flowconfig 来完成路径转换：

[options]
module.name_mapper='^\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

其中的 <PROJECT_ROOT> 为 Flow 的特殊记号，用来取得目前 .flowconfig 的路径。

注：module.name_mapper 可以指定多个进入点。除了别名外也可使用绝对路径及波浪号路径解析。

TypeScript 的 ~ 解析

TypeScript 需要了解你是如何使用 ~ 的模组解析及别名对应的。

详情请参阅 TypeScript 的 Module Resolution 文件。

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~*": ["./src/*"]
    }
  }
}

Monorepo 解析

目前 monorepo 的建议用法如下：

建议：

• 使用相对路径
• 若需使用根目录时，使用 /

不建议：

• 避免在 monorepo 中使用 ~

若你是 monorepo 使用者且有意分享你的建议的话，请开启一个 issue 并附上範例 repo 以便讨论。