web-dev-qa-db-fra.com

Comment Vscode devrait-elle être configurée pour soutenir un Lerna Monorepo?

J'ai un LERNA monorepo contenant beaucoup de paquets.

J'essaie d'obtenir ce qui suit:

  1. Assurez-vous que VSCODE fournit les suggestions d'importation correctes (basées sur les noms de packages, pas sur des chemins relatifs) d'un package à un autre.
  2. Assurez-vous que je peux "définition d'ouverture" de l'une de ces importations et être emmenée au SRC de ce fichier.

Pour 1. Je veux dire que si je navigue sur le code dans le package-A et je commence à taper une fonction exportée par package-B, je reçois une suggestion qui déclenchera l'ajout d'une importation: `importer {Exemple} de 'package- b '.

Pour 2. Je veux dire que si je l'alt/clic sur le nom d'une fonction exportée par 'package-b' tout en naviguant dans le fichier d'un autre package qui l'a importé, je suis pris à '/ packages/espaces de noms/packages/packages/b /src/file-that-contains-function.js ',

Monorepo (LERNA) est structuré en standard, par exemple ici est un package "composants" publié comme @namespace/components.

- packages
    - components
       - package.json
       - node_modules
       - src
         - index.js
         - components
           - Button
             - index.js
             - Button.js
       - es
         - index.js
         - components
           - Button
             - index.js
             - Button.js

Notez que chaque composant est représenté par un répertoire de sorte qu'il puisse contenir d'autres composants si nécessaire. Dans cet exemple, packages/components/index Exportations Button comme une exportation nommée. Les fichiers sont transpilés au paquet /es/ répertoire.

Par défaut, VSCODE fournit des autosuggestions pour les importations, mais il est confondu par cette structure et, car si un paquet différent dans la monorepo doit utiliser Button par exemple, attitosuggère tous les chemins d'importation suivants:

  • packages/components/src/index.js
  • packages/components/src/Button/index.js
  • packages/components/src/Button/Button.js
  • packages/components/es/index.js
  • packages/components/es/Button/index.js
  • packages/components/es/Button/Button.js

Cependant, aucun de ceux-ci n'est approprié, car ils seront rendus comme des chemins relatifs du fichier importateur dans le fichier importé. Dans ce cas, l'importation suivante est la bonne importation:

import { Button } from '@namespace/components'

L'ajout d'exclus au projet jsconfig.json n'a aucun effet sur les chemins suggérés et ne supprime même pas les suggestions à /es/*:

{
  "compilerOptions": {
    "target": "es6",
  },
  "exclude": [
    "**/dist/*",
    "**/coverage/*",
    "**/lib/*",
    "**/public/*",
    "**/es/*"
  ]
}

Ajout explicitement des chemins à l'aide des "compiléroptions" ne parvient pas également à configurer la relation correcte entre les fichiers:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@namespace/components/*": [
        "./packages/namespace-components/src/*.js"
      ]
    }
  },
}

À l'heure actuelle CMD/en cliquant sur une importation à partir d'un autre package ne parvient pas à ouvrir tout (aucune définition n'est trouvée).

Comment dois-je configurer VSCode de sorte que:

  1. VSCode autosuggest importe des autres forfaits dans la monorepo à l'aide du packagePache nomé comme valeur d'importation.
  2. Utiliser la "définition ouverte" me prend au SRC de ce fichier.

Comme demandé, j'ai une seule configuration Babel dans la racine:

const { extendBabelConfig } = require(`./packages/example/src`)

const config = extendBabelConfig({
  // Allow local .babelrc.js files to be loaded first as overrides
  babelrcRoots: [`packages/*`],
})

module.exports = config

Qui s'étend:

const presets = [
  [
    `@babel/preset-env`,
    {
      loose: true,
      modules: false,
      useBuiltIns: `entry`,
      shippedProposals: true,
      targets: {
        browsers: [`>0.25%`, `not dead`],
      },
    },
  ],
  [
    `@babel/preset-react`,
    {
      useBuiltIns: true,
      modules: false,
      pragma: `React.createElement`,
    },
  ],
]

const plugins = [
  `@babel/plugin-transform-object-assign`,
  [
    `babel-plugin-styled-components`,
    {
      displayName: true,
    },
  ],
  [
    `@babel/plugin-proposal-class-properties`,
    {
      loose: true,
    },
  ],
  `@babel/plugin-syntax-dynamic-import`,
  [
    `@babel/plugin-transform-runtime`,
    {
      helpers: true,
      regenerator: true,
    },
  ],
]

// By default we build without transpiling modules so that Webpack can perform
// tree shaking. However Jest cannot handle ES6 imports becuase it runs on
// babel, so we need to transpile imports when running with jest.
if (process.env.UNDER_TEST === `1`) {
  // eslint-disable-next-line no-console
  console.log(`Running under test, so transpiling imports`)
  plugins.Push(`@babel/plugin-transform-modules-commonjs`)
}

const config = {
  presets,
  plugins,
}

module.exports = config
javascriptimportvisual-studio-codelernamonorepo
16
Undistraction

J'ai finalement réussi à faire fonctionner cela de manière fiable. Vous devez créer un jsconfig.js Pour chaque colis de votre monorepo, par exemple:

  • {monorepo root}/packages/some-package/jsconfig.json:
{
  "compilerOptions": {
    "target": "es6",
    "jsx": "preserve",
    "module": "commonjs"
  },
  "include": ["src/**/*.js"],
  "exclude": ["src/index.js"]
}

Notez que j'ai exclu le src/index.js Fichier afin que cela ne soit pas offert comme une suggestion d'importation de cet emballage.

Cette configuration semble réaliser:

  • Suggestions d'importation IntelliSense à partir de forfaits au lieu d'utiliser des chemins relatifs.
  • Aller à la définition à la source d'autres forfaits dans la monorepo.

VSCODE a été assez floconneux de retard, mais cela semble fonctionner.

Remarque Ceci fonctionne pour un monorepo uniquement (Not Typypscript unique).

0
Undistraction