📔 Resolução de Módulo
O resolvedor do Parcel implementa uma versão modificada do algoritmo de resolução do node_modules.
Resolução de Módulo
Além do algorimo padrão, todos os tipos de recursos suportados pelo Parcel são resolvidos também.
A resolução de módulo pode ser relativa a:
- raiz do projeto: o diretório do entrypoint especificado para o Parcel, ou a raiz compartilhada (diretório pai em comum) quando múltiplos entrypoints são especificados.
- raiz do pacote: o diretório mais próximo da raiz do pacote em
node_modules
.
Caminhos Absolutos
/foo
irá resolver foo
relativo à raiz do projeto.
~ Caminhos com til
~/foo
irá resolver foo
em relação à raiz do pacote mais próxima ou, se não for encontrada, a raiz do projeto.
Caminho de arquivos Glob
Globs são importações curingas que agrupam vários recursos de uma só vez. Globs podem combinar alguns ou todos os arquivos (/assets/*.png
), bem como arquivos em vários diretórios (/assets/**/*
)
Este exemplo empacota um diretório de arquivos png e retorna as URLs de produção.
import foo from "/assets/*.png";
// {
// 'file-1': '/file-1.8e73c985.png',
// 'file-2': '/file-1.8e73c985.png'
// }
Campo browser
no package.json
Se um pacote incluir o campo package.browser
, o Parcel irá utilizá-lo ao invés da entrada package.main
.
Acrônimos
Os acrônimos são suportados através do campo alias
no package.json
.
Este exemplo utiliza react
como preact
e outros módulos locais que não estão em 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"
}
}
Evite utilizar quaisquer caracteres especiais em seus acrônimos, alguns podem ser usados pelo Parcel e outros por ferramentas de terceiros ou extensões. Por exemplo:
~
usado pelo Parcel para resolver caminhos com til.@
usado pelo npm para resolver organizações npm.
Recomendamos ser explícito ao definir seus acrônimos, então por favor especifique extensões, caso contrário o Parcel terá de adivinhar. Consulte exportações denominadas com Javascript para um exemplo disso.
Problemas comuns
Exportações denominadas com Javascript
Os mapeamentos de acrônimos se aplicam a muitos tipos de recursos e não oferecem suporte especificamente ao mapeamento de exportações denominadas com Javascript. Se você deseja mapear js chamado exports você pode fazer isso:
// package.json
{
"name": "some-package",
"alias": {
"ipcRenderer": "./electron-ipc.js" // especificando a extensão do arquivo
}
}
e re-exportando a exportação nomeada dentro do arquivo com acrônimo:
// electron-ipc.js
module.exports = require('electron').ipcRenderer
Flow via Resolução Absoluta ou Til
Flow precisará saber sobre a resolução de módulos para o uso de caminhos absolutos ou caminhos til. Utilizando o recurso module.name_mapper do Flow, nós podemos:
Especificar uma expressão regular para corresponder aos nomes dos módulos, bem como um padrão de substituição
Dado um projeto com essa estrutura:
package.json
.flowconfig
src/
index.html
index.js
components/
apple.js
banana.js
E src/index.html
como um entrypoint, a raíz do projeto (project root) é o diretório src/
.
Portanto, para mapear essa importação corretamente:
// index.js
import Apple from '/components/apple'
// na verdade queremos que o Flux procure:
// import Apple from 'src/components/apple';
nós podemos usar essa configuração no arquivo .flowconfig
para mapear o caminho absoluto (o direcionamento de /
) para src/
:
[options]
module.name_mapper='^\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
Nota: module.name_mapper
pode ter várias entradas se você desejar suportar acrônimo de módulo local.
Resolução ~ TypeScript
TypeScript terá de saber sobre o seu uso da resolução de módulo com ~
ou mapeamentos de acrônimos. Por favor, consulte a documentação de resolução do módulo do TypeScript para mais informações.
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~*": ["./src/*"]
}
}
}
Resolução Monorepo
Estes são os usos aconselhados com monorepos até o momento:
Uso recomendado:
- use caminhos relativos.
- use
/
para o caminho raíz, se a raíz for requerida.
Uso não recomentado:
- evite utilizar
~
com monorepos.
Se você é um usuário monorepo e gostaria de contribuir com essas recomendações, por favor, forneça repositórios de exemplo ao abrir issues para apoiar a discussão.
Ajude-nos a melhorar esta documentação
Se alguma coisa estiver faltando ou não estiver inteiramente clara, por favor crie uma issue no repositório deste site ou edite esta página.