ts monorepo
1.0.0
Tabela de conteúdo
O foco principal deste repositório é fazer o recurso
Go to definitionno IDES funcionar sem surpresas, o que significa que ele funcionará após um novo clone sem precisar construir o projeto.
O foco secundário é remover surpresas ao publicar pacotes. O repositório é configurado para que cada pacote obtenha uma saída de construção limpa sem artefatos de outros pacotes.
Todo o resto é mantido no mínimo . Além da minha configuração pessoal de ESLint para manter o código limpo, não há ferramentas extras incluídas - você é livre para personalizar isso para suas próprias necessidades após a clonagem. Alvos de compilação, sistemas de módulos, agitação de árvores etc. são deixados para você decidir.
Este repo usa o PNPM, mas deve funcionar bem com qualquer um dos seguintes:
lerna bootstrap I strongly recommend pnpm over the other solutions, not only because it's usually faster, but because it avoids dependency problems caused by hoisting (see https://github.com/NiGhTTraX/ts-monorepo/commit/d93139166b25fab15e9538df58a7d06270b846c9 as an example).
# Install pnpm with your preferred method: https://pnpm.io/installation.
npm i -g pnpm
# Install all dependencies.
pnpm iVeja as seguintes postagens do blog:
Se você está procurando a solução de referências do projeto, checando a filial project-references .
Este repo contém dois tipos de espaços de trabalho:
packages : destinado a ser publicado no NPM e instalado,apps : destinado a ser executado. Um bom exemplo para ilustrar a diferença é create-react-app : você não publicaria um aplicativo como esse para o NPM, o executaria, mais especificamente você construiria o pacote JS e depois implantaria isso em algum lugar.
Para pacotes, você não deseja agrupar todas as dependências do Monorepo e publicá -las individualmente. É por isso que os pacotes têm um Build tsconfig.json separado que resolve as dependências monorepos em node_modules .
Use o TSCONFIG-PATHS para resolver os aliases do caminho em tempo de execução:
{
"scripts" : {
"start" : " ts-node -r tsconfig-paths/register src/index.ts "
}
}Veja o exemplo completo aqui.
Use Babel-Plugin-Module-Rolver para resolver os aliases do caminho:
module . exports = {
presets : [
[ "@babel/preset-env" , { targets : { node : "current" } } ] ,
"@babel/preset-typescript" ,
] ,
plugins : [
[
"module-resolver" ,
{
alias : {
"^@nighttrax/(.+)" : "../\1/src" ,
} ,
} ,
] ,
] ,
} ;Veja o exemplo completo aqui.
Use tsconfig-paths-webpack-plugin para resolver os aliases do caminho:
const TsconfigPathsPlugin = require ( "tsconfig-paths-webpack-plugin" ) ;
module . exports = {
resolve : {
plugins : [ new TsconfigPathsPlugin ( ) ]
}
} ;Veja o exemplo completo aqui.
Se você usar Babel , veja este exemplo da seção Babel acima.
Se você usa o TS-JEST, poderá usar o pathsToModuleNameMapper Helper:
const { pathsToModuleNameMapper } = require ( "ts-jest" ) ;
const { compilerOptions } = require ( "../../tsconfig.json" ) ;
module . exports = {
preset : "ts-jest" ,
moduleNameMapper : pathsToModuleNameMapper ( compilerOptions . paths , {
// This has to match the baseUrl defined in tsconfig.json.
prefix : "<rootDir>/../../" ,
} ) ,
} ;Veja o exemplo completo aqui.
Use CRACO ou React-App-lawired para estender a configuração do Webpack da CRA e aplicar a tsconfig-paths-webpack-plugin:
const TsconfigPathsPlugin = require ( "tsconfig-paths-webpack-plugin" ) ;
module . exports = ( config ) => {
// Remove the ModuleScopePlugin which throws when we
// try to import something outside of src/.
config . resolve . plugins . pop ( ) ;
// Resolve the path aliases.
config . resolve . plugins . push ( new TsconfigPathsPlugin ( ) ) ;
// Let Babel compile outside of src/.
const oneOfRule = config . module . rules . find ( ( rule ) => rule . oneOf ) ;
const tsRule = oneOfRule . oneOf . find ( ( rule ) =>
rule . test . toString ( ) . includes ( "ts|tsx" )
) ;
tsRule . include = undefined ;
tsRule . exclude = / node_modules / ;
return config ;
} ;Veja o exemplo completo aqui. Para testes, consulte o exemplo de brincadeira.
Use vite-tsconfig-paths na configuração Vite:
import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import tsconfigPaths from "vite-tsconfig-paths" ;
export default defineConfig ( {
plugins : [
react ( ) ,
tsconfigPaths ( )
] ,
} ) ;Veja o exemplo completo aqui.
Estenda a configuração do WebPack do próximo a seguir para ativar pacotes de compilação do Monorepo:
module . exports = {
webpack : ( config ) => {
// Let Babel compile outside of src/.
const tsRule = config . module . rules . find (
( rule ) => rule . test && rule . test . toString ( ) . includes ( "tsx|ts" )
) ;
tsRule . include = undefined ;
tsRule . exclude = / node_modules / ;
return config ;
} ,
} ;Veja o exemplo completo aqui.
Inclua os aliases do caminho em tsconfig.json e tsconfig.build.json e diga a Nestjs onde encontrar o arquivo main.js :
{
"collection" : " @nestjs/schematics " ,
"sourceRoot" : " src " ,
"entryFile" : " apps/nestjs/src/main "
}Veja o exemplo completo aqui.
Extenha a configuração do WebPack do Storybook e aplique o Tsconfig-Paths-Webpack-Plugin:
const TsconfigPathsPlugin = require ( 'tsconfig-paths-webpack-plugin' ) ;
module . exports = {
webpackFinal : async ( config ) => {
config . resolve . plugins = [
... ( config . resolve . plugins || [ ] ) ,
new TsconfigPathsPlugin ( {
extensions : config . resolve . extensions ,
} ) ,
] ;
return config ;
} ,
} ;Veja o exemplo completo aqui.
