web-dev-qa-db-ja.com

VSCodeはどのようにしてLerna Monorepoをサポートするように設定する必要がありますか？

私は Lerna モノレポがたくさんのパッケージを含んでいます。

私は以下を達成しようとしています：

  1. VScodeが、あるパッケージから別のパッケージへの正しいインポート候補（相対パスではなく、パッケージ名に基づく）を確実に提供してください。
  2. これらのインポートのいずれかのうちの1つの「定義」を「定義」できることを確認して、そのファイルのSRCに行くことができます。

1.パッケージ-A内のコードをナビゲートしている場合は、パッケージBによってエクスポートされた関数を入力し始めた場合、インポートの追加をトリガーする推奨事項があります。 NS'。

2の場合は、インポートした別のパッケージからファイルをナビゲートしながら、 'package-b'によってエクスポートされた関数の名前をAlt /クリックしている場合は、 '/ packages/namespace/package/bに移動します。 /src/file-that-c​​ontains-function.js '

My（Lerna）Monrepoは標準として構成されています。たとえば、ここに@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

各コンポーネントは、必要に応じて他のコンポーネントを含めることができるようにディレクトリによって表されます。この例では、packages/components/indexエクスポートButtonが名前付きエクスポートとして_です。ファイルはパッケージの/es/ディレクトリに置かれます。

デフォルトでは、vscodeはインポートに自動サブメッセージを提供しますが、この構造によって混乱し、モノレポの異なるパッケージがたとえばButtonを使用する必要がある場合は、次のすべてのインポートパスを使用します。

  • 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

ただし、インポートファイルからインポートされたファイルへの相対パスとしてレンダリングされるため、これらのどれも適切なものはありません。この場合、次のインポートが正しいインポートです。

import { Button } from '@namespace/components'

プロジェクトのjsconfig.jsonに除外を追加すると、推奨されるパスに影響がありません。/es/*で提案を削除しません。

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

"CompilerOptions"を使用してパスを明示的に追加すると、ファイル間の正しい関係を設定できません。

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

現在のcmd /別のパッケージからインポートをクリックすると、何も開くことができません（定義は見つかりません）。

vScodeをどのように設定してください。

  1. vscode autosuggessは、名前空間パッケージをインポート値として使用して、モノレポの他のパッケージからインポートします。
  2. [オープン定義]を使用すると、そのファイルのSRCにアクセスします。

要求されたように、私はルートに1つのBabel設定を持っています：

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

これは次のとおりです。

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

私はついにこれを確実に機能させることができました。 MONOREPOのすべてのパッケージに別のjsconfig.jsを作成する必要があります。

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

src/index.jsファイルを除外したことに注意してください。そのパッケージ内からのインポート候補として提供されていないことに注意してください。

この設定は達成されたようです。

  • IntelliSenseは、相対パスを使用する代わりにパッケージからの提案をインポートします。
  • モノレポの他のパッケージのソースへの定義に進みます。

Vscodeは遅くのきれいな薄片でしたが、それは働いているようです。

（注）これはJavaScriptのみのモノレポ（TypeScriptではなく）のために機能します。

0
Undistraction