• ? 模块解析
    • 模块解析
      • 绝对路径
      • 波浪号路径
      • Glob 文件路径
      • package.json browser 字段
      • 别名
    • 常见问题
      • JavaScript 命名导出
      • Flow 中的绝对路径和波浪号路径解析
      • TypeScript ~ 解析
      • Monorepo 解析
    • 帮助我们改善文档

    ? 模块解析

    Parcel 解析器实现了一版改进后的node_modules 解析算法

    模块解析

    除了标准算法，所有Parcel 支持的资源种类 都可以被解析

    模块解析可以相对于：

    • 入口根目录：指定给 Parcel 的入口目录，或者多个入口执定的共享根目录（同一个父目录）。
    • 包的根目录：node_modules 中最接近模块根的目录。

    绝对路径

    /foo相对于入口根目录解析成foo。

    波浪号路径

    ~/foo解析成foo相对于最近的包的根目录，如果不存在则是入口根目录

    Glob 文件路径

    Globs 可以使用通配符一次导入多个资源，匹配一些文件(/assets/.png)，或者匹配多个目录中的文件(/assets/**/)

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

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

    package.json browser 字段

    如果一个包的 package.json 包含 package.browser 字段，Parcel 将使用它替换 package.main 入口

    别名

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

    这个例子的react别名是preact，而local-module并不是来自node_modules

    1. // package.json
    2. {
    3.   "name": "some-package",
    4.   "devDependencies": {
    5.     "parcel-bundler": "^1.7.0"
    6.   },
    7.   "alias": {
    8.     "react": "preact-compat",
    9.     "react-dom": "preact-compat",
    10.     "local-module": "./custom/modules"
    11.   }
    12. }

    应避免在你的别名中使用特殊字符，因为可能被 Parcel 和其他第三方工具或扩展使用。比如：

    • ~ 被 Parcel 用来处理 波浪号路径
    • @ 被 npm 解释成 npm 组织（译者注：如@babel 是 babel 组织下的 npm 包）我们建议在定义别名时要明确，所以最好指出文件的扩展名，而不是让 Parcel 猜。请看这个例子 JavaScript 命名导出。

    常见问题

    JavaScript 命名导出

    别名映射应用于很多种类的资源，但是并没有特别支持 JavaScript 命名导出。如果你想要这样做：

    1. // package.json
    2. {
    3.   "name": "some-package",
    4.   "alias": {
    5.     "ipcRenderer": "./electron-ipc.js" // 指定文件扩展名
    6.   }
    7. }

    接着，在有别名的文件中重新导出

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

    Flow 中的绝对路径和波浪号路径解析

    解析这样的模块你需要配置 Flow 并且使用module.name_mapper特性

    这里有个文件结构如下：

    1. package.json
    2. .flowconfig
    3. src/
    4.   index.html
    5.   index.js
    6.   components/
    7.     apple.js
    8.     banana.js

    src/index.html是入口，src/ 文件是入口根目录

    因此，当前正确的引入映射是：

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

    我们需要 Flow 将'/components/apple'前头的/替换成src/，这样就是'src/components/apple'。

    下面在.flowconfig的设置可以完成这个替换

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

    这里的<PROJECT_ROOT>在 Flow 里是一个特定的标识符代表.flowconfig所在的路径

    注意：module.name_mapper可以有多个入口，除了别名，还可以支持绝对路径，波浪号路径解析

    TypeScript ~ 解析

    TypeScript 需要了解你是如何使用 ~ 进行模块解析和别名映射。更多信息请参考 TypeScript 模块解析文档

    1. // tsconfig.json
    2. {
    3.   "compilerOptions": {
    4.     "baseUrl": ".",
    5.     "paths": {
    6.       "~*": ["./src/*"]
    7.     }
    8.   }
    9. }

    Monorepo 解析

    下列是 Monorepo 目前建议的用法

    建议：

    • 使用相对路径

    • 若使用根目录时，使用 /不建议：

    • 避免在 monorepo 中使用 ~如果你是 monorepo 使用者且有意分享你的建议，请提交 issues 并提供一个范例以便讨论。

    帮助我们改善文档

    如果有遗漏或者不清楚的地方，请在本站的仓库 提交issue 或者 编辑此页面.