Hala webpack ile modül yollarını çözmek için kafam karıştı. Şimdi yazıyorum:

myfile = require('../../mydir/myfile.js') 

ama yazmak istiyorum

myfile = require('mydir/myfile.js') 

Çözme.alias'ın{ xyz: "/some/dir" } takma ad olarak kullandığım benzer bir örneği gördüğüm için yardımcı olabileceğini düşünüyordum require("xyz/file.js").

Ben benim takma set Ama eğer { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') iş olmaz.

Aptal hissediyorum çünkü dokümanı defalarca okudum ve bir şeyleri kaçırdığımı hissediyorum. ../../Vb ile gerekli tüm akrabaları yazmaktan kaçınmanın doğru yolu nedir ?

Web paketi> 2.0

Wtk'nin cevabına bakınız .

Webpack 1.0

Bunu yapmanın daha basit bir yolu resol.root kullanmak olacaktır.

http://webpack.github.io/docs/configuration.html#resolve-root

resolve.root

Modüllerinizi içeren dizin (mutlak yol). Ayrıca bir dizi dizin de olabilir. Bu ayar, arama yoluna tek tek dizinler eklemek için kullanılmalıdır.

Senin durumunda:

webpack yapılandırması

var path = require('path');

// ...

  resolve: {
    root: path.resolve('./mydir'),
    extensions: ['', '.js']
  }

tüketen modül

require('myfile')

veya

require('myfile.js')

ayrıca bkz: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

İleride başvurmak üzere webpack 2, modulesyolları çözmenin bir yolu olarak her şeyi kaldırdı . Bu araçlar rootolacak değil çalışır.

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

Örnek yapılandırma şununla başlar:

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)

resolve.alias tam olarak tarif ettiğiniz şekilde çalışmalıdır, bu yüzden orijinal sorunun çalışmadığı yönündeki öneriden kaynaklanabilecek karışıklıkları azaltmaya yardımcı olmak için bunu bir cevap olarak sağlıyorum.

aşağıdaki gibi bir çözüm yapılandırması size istenen sonuçları verecektir:

// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}

require( 'mydir/myfile.js' )beklendiği gibi çalışacaktır. Değilse, başka bir sorun olmalı.

Arama yoluna eklemek istediğiniz birden fazla modülünüz varsa resolve.root, mantıklıdır, ancak uygulama kodunuzdaki bileşenlere göreli yollar olmadan başvurabilmek istiyorsanız alias, en basit ve açıktır.

Bunun önemli bir avantajı, kodunuza netlik aliaskatabilen size ad alanı koyma fırsatı vermesidir require; tıpkı diğer requiremodüllerden hangi modüllere başvurulduğunu görmek kolay olduğu gibi, dahili modüllere ihtiyaç duyduğunuzu açıkça ortaya koyan aliasaçıklayıcı requires yazmanıza olanak tanır , örn require( 'my-project/component' ). resolve.rootsadece daha fazla ad alanı oluşturma fırsatı vermeden sizi istediğiniz dizine yerleştirir.

Başka kimse bu sorunla karşılaşırsa, ben böyle çalışmasını başardı:

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

benim dizin yapısı:

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

Sonra srcdizinde herhangi bir yerden arayabilirim:

import MyComponent from 'components/MyComponent';

En büyük baş ağrım isim boşluğu olmadan çalışıyordu. Bunun gibi bir şey:

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

Bunu yapmak için ortamımı ayarlamadan önce:

require('app.js')
require('ui/menu')
require('lodash')

srcÖnemli bağlam bilgilerini gizleyen, örtük bir yoldan kaçınmak için çok daha uygun buldum .

Amacım böyle bir şey istemektir:

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

Gördüğünüz gibi, tüm uygulama kodum zorunlu bir yol ad alanı içinde yaşıyor. Bu hangi çağrı gerektiren bir kütüphane, uygulama kodu veya bir test dosyası gerektirir oldukça açıktır.

Bunun node_modulesiçin uygulamanızı kaynak klasörünüzdesrc/my_app

Bu benim webpack ile varsayılan

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

Ortamın NODE_PATHmevcut proje dosyanıza göre ayarlanması daha da iyi olur . Bu daha evrensel bir çözümdür ve webpack olmadan başka araçlar kullanmak istiyorsanız yardımcı olacaktır: test, linting ...

Ben böyle Webpack 2 ile çözmek var:

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

Diziye daha fazla dizin ekleyebilirsiniz ...

Bunu Webpack 2 kullanarak çözdüm:

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }

Eğer kullanıyorsanız oluşturmak-tepki-app , sadece bir ekleyebilir .enviçeren dosyayı

NODE_PATH=src/

Kaynak: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Bu iş parçacığı eski ama kimse requir.context hakkında yayınlanmıştır beri ben bahsedeceğim:

Klasörü şu şekilde görünecek şekilde ayarlamak için requir.context kullanabilirsiniz:

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

Neden kimsenin myDir'in üst dizinini modüllere dahil etmeyi önerdiğini anlamadım.Web paketindeki dizinler, bu kolayca hile yapmalıdır:

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },

Sadece babel-plugin-module-resolver kullanın :

$ npm i babel-plugin-module-resolver --save-dev

Ardından .babelrc, zaten bir dosyanız yoksa kök altında bir dosya oluşturun :

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

Ve kök altındaki her şey mutlak ithalat olarak ele alınacaktır:

import { Layout } from 'components'

VSCode / Eslint desteği için buraya bakın .