Parcel 模塊解析

模塊解析

Parcel 解析器實現了一版改進后的node_modules 解析算法

模塊解析

除了標準算法，所有Parcel 支持的資源種類 都可以被解析

模塊解析可以相對于：

• 入口根目錄：指定給 Parcel 的入口目錄，或者多個入口執(zhí)定的共享根目錄（同一個父目錄）。
• 包的根目錄：node_modules 中最接近模塊根的目錄。

絕對路徑

/foo相對于入口根目錄解析成foo。

波浪號路徑

~/foo解析成foo相對于最近的包的根目錄，如果不存在則是入口根目錄

Glob 文件路徑

Globs 可以使用通配符一次導入多個資源，匹配一些文件(/assets/*.png)，或者匹配多個目錄中的文件(/assets/**/*)

此示例打包了一個文件中的所有 png 并返回了 dist 的 URLs。

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

package.json browser 字段

如果一個包的 package.json 包含 package.browser 字段，Parcel 將使用它替換 package.main 入口

別名

支持在package.json中設置alias 字段

這個例子的react別名是preact，而local-module并不是來自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 組織（譯者注：如@babel 是 babel 組織下的 npm 包）

我們建議在定義別名時要明確，所以最好指出文件的擴展名，而不是讓 Parcel 猜。請看這個例子 JavaScript 命名導出。

常見問題

JavaScript 命名導出

別名映射應用于很多種類的資源，但是并沒有特別支持 JavaScript 命名導出。如果你想要這樣做：

// 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/ 文件是入口根目錄

因此，當前正確的引入映射是：

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

我們需要 Flow 將'/components/apple'前頭的/替換成src/，這樣就是'src/components/apple'。

下面在.flowconfig的設置可以完成這個替換

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

這里的<PROJECT_ROOT>在 Flow 里是一個特定的標識符代表.flowconfig所在的路徑

注意：module.name_mapper可以有多個入口，除了別名，還可以支持絕對路徑，波浪號路徑解析

TypeScript ~ 解析

TypeScript 需要了解你是如何使用 ~ 進行模塊解析和別名映射。 更多信息請參考 TypeScript 模塊解析文檔

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

Monorepo 解析

下列是 Monorepo 目前建議的用法

建議：

• 使用相對路徑
• 若使用根目錄時，使用 /

不建議：

• 避免在 monorepo 中使用 ~

如果你是 monorepo 使用者且有意分享你的建議，請?zhí)峤?issues 并提供一個范例以便討論。