हल करने के लिए वेबपैक के साथ पथ की आवश्यकता होती है

Question

मैं अभी भी भ्रमित हूं कि वेबपैक के साथ मॉड्यूल पथ को कैसे हल किया जाए। अब मैं लिखता हूं:

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

लेकिन मैं लिखना चाहूंगा

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

मैं सोच रहा था कि जब भी मैं उर्फ के रूप में एक समान उदाहरण का उपयोग करता हूं, तो मैं हल कर सकता { xyz: "/some/dir" }हूं require("xyz/file.js")।

लेकिन अगर मैं अपना उपनाम निर्धारित करता हूं { mydir: '/absolute/path/mydir' }, require('mydir/myfile.js') तो काम नहीं करेगा।

मैं गूंगा महसूस करता हूं क्योंकि मैंने कई बार डॉक्टर को पढ़ा है और मुझे लगता है कि मैं कुछ याद कर रहा हूं। ../../आदि के साथ सभी रिश्तेदार की आवश्यकता को लिखने से बचने का सही तरीका क्या है ?

Comments

resolve.aliasठीक उसी तरह से काम करता है जिस तरह से आपने सुझाव दिया था। मुझे आश्चर्य है कि अगर यह आपके resolveकॉन्फ़िगरेशन में कुछ और के कारण विफल हो रहा था । मैं उपयोग करता हूं alias{ mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )और require( 'mydir/myfile.js' )ठीक काम करता हूं ।

— सेठारो

Answer 1

वेबपैक> २.०

देखें WTK का जवाब ।

वेबपैक 1.0

ऐसा करने के लिए एक और अधिक सरल तरीका है।

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

resolve.root

निर्देशिका (निरपेक्ष पथ) जिसमें आपके मॉड्यूल शामिल हैं। निर्देशिकाओं की एक सरणी भी हो सकती है। इस सेटिंग का उपयोग खोज पथ में अलग-अलग निर्देशिकाओं को जोड़ने के लिए किया जाना चाहिए।

आपके मामले में:

वेबपैक विन्यास

var path = require('path');

// ...

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

खपत मॉड्यूल

require('myfile')

या

require('myfile.js')

इसे भी देखें: http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Comments

धन्यवाद, मैंने कोशिश की root, modulesDirectoriesऔर दोनों का मिश्रण, लेकिन यह काम नहीं किया। ऐसा लगता है कि सबमॉड्यूल्स (जैसे require("mydir/file")) स्वीकार नहीं किए जाते हैं।

— gpbl 20

उन्हें होना चाहिए - क्या हम आपके वेबपैक को देख सकते हैं?

— जेफ लिंग

अगर मैं इसे सही ढंग से समझ रहा हूं, तो इस कॉन्फ़िगरेशन का उपयोग करने के लिए यह आवश्यक होगा कि फ़ाइल नाम अद्वितीय हो?

— जॉनी

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve has an unknown property 'root'.

— टॉम ज़ातो -

"वेबपैक 2 ने रास्तों को हल करने के तरीके के रूप में सब कुछ हटा दिया, लेकिन इसका मतलब है कि रूट काम नहीं करेगा" stackoverflow.com/a/36574982/588759

— rofrol

Answer 2

भविष्य के संदर्भ के लिए, वेबपैक 2 ने सब कुछ हटा दिया लेकिन modulesपथ को हल करने के तरीके के रूप में। यह साधन काम नहींroot करेगा ।

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

उदाहरण कॉन्फ़िगरेशन के साथ शुरू होता है:

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

Comments

धन्यवाद, यह वास्तव में उपयोगी है। modulesDirectoriesअभी भी वेबपैक-देव-सर्वर द्वारा उपयोग किया जाता है, यहां तक ​​कि वेबपैक 2 के साथ भी, जो इसे बहुत भ्रमित करता है।

— इवान

Answer 3

resolve.alias आपके द्वारा बताए गए तरीके से सही तरीके से काम करना चाहिए, इसलिए मैं इसे किसी भी भ्रम को कम करने में मदद करने के लिए एक उत्तर के रूप में प्रदान कर रहा हूं जो मूल प्रश्न में सुझाव के परिणामस्वरूप हो सकता है कि यह काम नहीं करता है।

नीचे दिए गए संकल्प जैसा संकल्प आपको वांछित परिणाम देगा:

// 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' )उम्मीद के मुताबिक काम करेंगे। यदि ऐसा नहीं होता है, तो कुछ अन्य मुद्दा होना चाहिए।

यदि आपके पास कई मॉड्यूल हैं जिन्हें आप खोज पथ में जोड़ना चाहते हैं, तो resolve.rootसमझ में आता है, लेकिन यदि आप बस अपने पथ के सापेक्ष घटकों के बिना अपने संदर्भ कोड में सक्षम होना चाहते हैं,alias तो यह सबसे सीधा और स्पष्ट प्रतीत होता है।

इसका एक महत्वपूर्ण लाभ aliasयह है कि यह आपको अपने requires नाम स्थान का अवसर देता है जो आपके कोड में स्पष्टता जोड़ सकता है; जैसे अन्य requireमॉड्यूल से देखना आसान है कि किस मॉड्यूल को संदर्भित किया जा रहा है, aliasआपको वर्णनात्मक requireएस लिखने की अनुमति देता है जिससे यह स्पष्ट होता है कि आपको आंतरिक मॉड्यूल की आवश्यकता है, उदा require( 'my-project/component' )। resolve.rootबस आपको वांछित निर्देशिका में शामिल करना है ताकि आप इसे आगे नाम देने का अवसर दे सकें।

Comments

मुझे टिल्ड उर्फ ​​पसंद है:alias: {'~': path.resolve(__dirname)},

— डैनियल बकमास्टर

किसी भी संकेत कैसे फ़ाइल एक्सटेंशन के बिना उप-निर्देशिका आयात का समर्थन करने के लिए इस समाधान को समायोजित करने के लिए? @ सेथ्रो

— फेल्डमैन

@DimaFeldman, आपको मतलब तर्क ( require('mydir/myfile')) में कोई एक्सटेंशन नहीं है ? वह वास्तव में काम करना चाहिए। आप में कई प्रविष्टियाँ हो सकती हैं alias; मैं srcजावास्क्रिप्ट मॉड्यूल के लिए अपनी निर्देशिका से आयात करने के stylesलिए और सीएसएस के लिए मेरी निर्देशिका से आयात करने के लिए अन्य का उपयोग करता हूं । मुझे पता है अगर मैं पूरी तरह से आपके सवाल का गलत समझा है।

— सेतरो

@sethro आप सही हैं, मुझे मेरा प्रश्न बताएं - मेरा मतलब क्या है: मेरे पास एक निर्देशिका है, कॉम्पोनेन्ट 1 कहो, और इस डीआईआर के अंदर मेरे पास एक फाइल है जिसका नाम कॉम्पोनेन्ट 1 है। जेएस। उपनाम का उपयोग करने से पहले, मैं केवल कॉल करके फ़ाइल आयात कर सकता था import './path/to/Component1';- बस पथ में आंतरिक फ़ाइल नाम और एक्सटेंशन के बिना। वेबपैक किसी तरह यह पता लगाने में कामयाब रहा कि इनर फ़ाइल में डायरेक्टरी का नाम है, और बस इसे आयात किया गया है। अब मैं जो करना चाहता हूं, उसे इस तरह से आयात करना है: import 'shared\Component1';जब 'साझा' उर्फ ​​है। लेकिन यह इनर फ़ाइल नाम निर्दिष्ट किए बिना काम नहीं करता है। धन्यवाद!

— दिमा फेल्डमैन

@DimaFeldman क्षमा करें, आपके द्वारा बताए जा रहे व्यवहार से मैं परिचित नहीं हूँ; इसलिए आपको मुझे माफ़ करना होगा यदि मैं किसी ज्ञात विशेषता से अनभिज्ञ हूँ (मुझे इसके लिए दस्तावेज नहीं मिल सकते हैं)। मुझे आश्चर्य है कि अगर आपके पास अपने कॉन्फ़िगरेशन में कुछ लोडर है जो केवल अपने स्थान को निर्दिष्ट करके एक मॉड्यूल आयात करने की क्षमता प्रदान कर रहा है (लेकिन इसका फ़ाइल नाम नहीं है)? क्षमा करें, मैं कोई मदद नहीं कर सकता ... आपकी कॉन्फ़िग फ़ाइल में शामिल एक नया प्रश्न पूछना सबसे अच्छा हो सकता है।

— सेठरो

Answer 4

यदि कोई और इस समस्या में भाग लेता है, तो मैं इसे इस तरह काम करने में सक्षम था:

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

मेरी निर्देशिका संरचना कहां है:

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

फिर srcनिर्देशिका में कहीं से भी मैं कॉल कर सकता हूं:

import MyComponent from 'components/MyComponent';

Comments

Path.resolve का उपयोग करके node_modules को हल करना अच्छा नहीं है। यह उप-निर्भरता के साथ समस्याएं पैदा कर सकता है। 'node_modules'इसके बजाय स्ट्रिंग का उपयोग करें । [ path.resolve(__dirname, 'src'), 'node_modules' ],

— स्पेंसर.स्मि

@ spencer.sm यदि मैं केवल मॉड्यूल को वर्तमान परियोजना से हल करना चाहता हूं तो क्या होगा? मेरे पास कुछ परियोजनाएं हैं जो एक दूसरे से आयात करती हैं। यदि ProjectA ProjectB से fileA आयात करता है, और fileA आयात करता है lodash, तो मैं lodashकेवल से हल होना चाहता हूं projectA/node_modules। यह वह है जो resolve.modules: [path.resolve(__dirname, 'node_modules')]उपयोगी है। हालाँकि, मैंने कहा कि उप-निर्भरता के साथ समस्याओं में चल रहा है। वहाँ एक तरीका है webpack भी कहा उप-निर्भरता को खोजने के लिए नोड_modules संकल्प को सीमित करने के अलावा projectA/node_modules?

— एरिक गुआन

@ spencer.sm धन्यवाद! बहुत संघर्ष के बाद, आखिरकार आपके समाधान ने मेरे उप-निर्भरता के मुद्दों को हल किया: डी

— साद अब्दुल्ला

Answer 5

मेरा सबसे बड़ा सिरदर्द बिना नाम वाले रास्ते पर काम कर रहा था। कुछ इस तरह:

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

इससे पहले कि मैं ऐसा करने के लिए अपना वातावरण सेट करता था:

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

मैंने एक निहित srcपथ से बचने के लिए कहीं अधिक सुविधाजनक पाया , जो महत्वपूर्ण संदर्भ जानकारी को छुपाता है।

मेरा उद्देश्य इस तरह की आवश्यकता है:

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

जैसा कि आप देखते हैं, मेरे सभी ऐप कोड अनिवार्य पथ नामस्थान के भीतर रहते हैं। यह काफी स्पष्ट करता है जिसके लिए कॉल की आवश्यकता होती है एक पुस्तकालय, ऐप कोड या एक परीक्षण फ़ाइल।

इसके लिए मैं यह सुनिश्चित करता हूं कि मेरे संकल्प पथ केवल node_modulesऔर वर्तमान एप्लिकेशन फ़ोल्डर हैं, जब तक कि आप अपने स्रोत फ़ोल्डर के अंदर अपने ऐप को नाम स्थान न देंsrc/my_app

यह वेबपैक के साथ मेरा डिफ़ॉल्ट है

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

यह बेहतर होगा कि आप पर्यावरण वर्जन NODE_PATHको अपनी वर्तमान परियोजना फ़ाइल में सेट करें । यह एक अधिक सार्वभौमिक समाधान है और यह मदद करेगा यदि आप वेबपैक के बिना अन्य उपकरणों का उपयोग करना चाहते हैं: परीक्षण, अस्तर ...

Answer 6

मैंने इसे इस तरह Webpack 2 के साथ हल किया है:

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

आप सरणी में अधिक निर्देशिका जोड़ सकते हैं ...

Comments

सावधान रहें, पूर्ण और सापेक्ष पथ समान प्रक्रिया नहीं है! निर्माण समय को प्रभावित कर सकते हैं webpack.js.org/configuration/resolve/#resolve-modules

— TeChn4K

यह दोनों मामलों में काम करेगा, लेकिन बनाता है (हो सकता है) सापेक्ष रास्तों के साथ अधिक समय लेता है।

— TeChn4K

Answer 7

वेबपैक 2 का उपयोग करके इसे हल किया गया:

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

Answer 8

यदि आप create-react-app का उपयोग कर रहे हैं , तो आप केवल एक .envफ़ाइल युक्त जोड़ सकते हैं

NODE_PATH=src/

स्रोत: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Answer 9

यह धागा पुराना है, लेकिन आवश्यकता के बारे में किसी ने पोस्ट नहीं किया है। संदर्भ में मैं इसका उल्लेख करने जा रहा हूं:

आप इस तरह से देखने के लिए फ़ोल्डर सेट करने के लिए आवश्यकता का उपयोग कर सकते हैं:

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

return req('./myfile.js')

Answer 10

मुझे नहीं मिला कि किसी ने myDir की मूल निर्देशिका को webpack में मॉड्यूलडायरेक्ट्री में शामिल करने का सुझाव क्यों दिया, जिससे आसानी से चाल चलनी चाहिए:

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

Answer 11

बस बेबल-प्लगइन-मॉड्यूल-रिज़ॉल्वर का उपयोग करें :

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

.babelrcयदि आपके पास पहले से ही नहीं है तो रूट के तहत एक फाइल बनाएं :

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

और रूट के तहत सब कुछ पूर्ण आयात के रूप में माना जाएगा:

import { Layout } from 'components'

VSCode / Eslint समर्थन के लिए, यहां देखें ।