Webパックでのエイリアスの使用

あなたがプロジェクトのインポートで見たいと思う最後のものは、このような醜いものです

これは私がいくつかの周波数で使用する機能ですが、私はそれを必要とするときに私はパターンを覚えているほど頻繁に十分ではない、私は自分のメモとしてこの記事を書いた.

ウェブパックの設定を変更する

  resolve: {
    alias: {
      '@ui': path.resolve(__dirname, 'src/components/ui'),
      '@shared': path.resolve(__dirname, 'src/shared'),
    },
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'],
  },

ので、intellisenseを破ることはありません

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": false,
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "@ui/*": ["./src/components/ui/*"],
      "@shared/*": ["./src/shared/*"]
    }
  },
  "exclude": ["node_modules"]
}

正規表現を使用してすべてを置き換えます.
例:

/'.*/shared/g

または、より単純なケースがあるならば

(\s)from(.*)shared/

(空白は重要なので、"from "終了を持つファイルにはカウントされません.

、それからリンターAutofixerでそれをきれいにしてください.

より良い.