Reactのパスエイリアス

このチュートリアルは、cretae-react-appのパスエイリアスを設定するのに役立ちます。

コンテンツ

• <a href="#Intro">Introduction </a>
  
  
  
  

  
  
  
  
  

• <a href="#Craco">Import Craco </a>
  
  
  
  

  
  
  
  
  

• <a href="#Eject">React-scripts eject</a>
  
  
  
  

  
  
  
  
  

前書き

なぜこれが必要なのかから始めましょう。

プロジェクト内のコンポーネントとさまざまなサービスの数が増えるにつれて、次のインポートがますます頻繁に表示されるようになります。

これらのパスを次のようなものに置き換えたいと思います。

以下に、この問題を解決するための2つのオプションを示します。

クラコをインポートする

- craco. , , path aliases craco.config.js.

const path = require('path');

const resolvePath = p => path.join(path.resolve(__dirname, p))

module.exports = {
    // ...
    webpack: {
        alias: {
            '@components': resolvePath('./src/components'),
            '@assets': resolvePath('./src/assets'),
            '@services': resolvePath('./src/services')
        }
    },
  // ...
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

React-scripts eject

, . , , !

npm react-scripts eject
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

• config/

  
  
  
  
  

• scripts/

  
  
  
  
  

• tsconfig.json ( jsconfig.json)

  
  
  
  
  

path aliases tsconfig.json ( jsconfig.json). , config/ webpack jest.

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styled/*": ["src/components/styled/*"],
      "@pages/*": ["src/pages/*"],
      "@assets/*": ["src/assets/*"],
      "@services/*": ["src/services/*"]
    },
    // ...
  },
  // ...
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

modules.js, .

'use strict'

const fs = require('fs')
const path = require('path')
const paths = require('./paths')
const chalk = require('react-dev-utils/chalk')
const resolve = require('resolve')

const slicePath = p => p.slice(0, p.indexOf('*') - 1)

// ...

function getWebpackAliases(options = {}) {
    const baseUrl = options.baseUrl

    if (!baseUrl) {
        return {}
    }

    let resultAlias = {src: paths.appSrc}
    
    return Object.assign({}, resultAlias,
            Object.keys(options.paths).reduce(
                (obj, x) => {
                    obj[slicePath(x)] = options.paths[x].map(slicePath)[0]
                    return obj
                }, {}
            )
        )
}

// ...

function getJestAliases(options = {}) {
    const baseUrl = options.baseUrl

    if (!baseUrl) {
        return {}
    }

    let resultAlias = {'^src/(.*)$': '<rootDir>/src/$1'}
    
    return Object.assign({}, resultAlias,
            Object.keys(options.paths).reduce(
                (obj, x) => {
                    obj[`^${slicePath(x)}(.*)$`] = options.paths[x].map(x => `<rootDir>/src/${slicePath(x)}/$1`)
                    return obj
                }, {}
            )
        )
}

// ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

これで、プロジェクトは作成したパスエイリアスで正常に機能しています。

あなたの健康にそれを使用してください！