164

ওয়েবপ্যাক দিয়ে মডিউল পাথগুলি কীভাবে সমাধান করবেন আমি এখনও বিভ্রান্ত। এখন আমি লিখছি:

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') কাজ করবে না।

আমি বোবা বোধ করি কারণ আমি ডকটি অনেকবার পড়েছি এবং আমি অনুভব করছি যে আমি কিছু মিস করছি। ../../ইত্যাদি সম্পর্কিত সমস্ত আপেক্ষিক লিখিততা এড়ানো সঠিক উপায় কী ?

javascript webpack

— gpbl
সূত্র

resolve.aliasআপনার প্রস্তাব মতো ঠিক কাজ করে। আমি ভাবছি যদি এটি আপনার resolveকনফিগারেশনের অন্য কোনও কারণে ব্যর্থ হয় । আমি ব্যবহার করি alias{ mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )এবং require( 'mydir/myfile.js' )ঠিকঠাক কাজ করি ।

— সেথ্রো

142

ওয়েবপ্যাক> ২.০

দেখুন 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/configration.html#resolve-modulesd ডিরেক্টরি

— AndyCunningham
সূত্র

1

ধন্যবাদ, আমি চেষ্টা root, modulesDirectoriesএবং উভয় একটি মিশ্রণ, কিন্তু এটা কাজ করে নি। দেখে মনে হচ্ছে সাবমডিউলগুলি (যেমন require("mydir/file")) গ্রহণ করা হয়নি।

— gpbl

সেগুলি হওয়া উচিত - আমরা কি আপনার ওয়েবপ্যাক কনফিগার করতে পারি?

— জেফ লিং

1

যদি আমি এটি সঠিকভাবে বুঝতে পারি, এই কনফিগারেশনটি ব্যবহার করার জন্য ফাইলের নামগুলি অনন্য হওয়া দরকার?

— জনি

1

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'.

— টোম জ্যাটো - মনিকা

1

"webpack 2 সরানো সবকিছু কিন্তু সমাধানে পাথ করার জন্য একটি উপায় হিসেবে মডিউল এই উপায়ে রুট কাজ করবে না।" stackoverflow.com/a/36574982/588759

— rofrol

72

ভবিষ্যতের রেফারেন্সের জন্য, ওয়েবপ্যাক 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)

— wtk
সূত্র

4

ধন্যবাদ, এটি সত্যই সহায়ক। modulesDirectoriesওয়েবপ্যাক-ডেভ-সার্ভার দ্বারা এখনও ওয়েবপ্যাক 2 ব্যবহার করা হয় যা এটি খুব বিভ্রান্তিকর করে তোলে।

— ইভান

63

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হ'ল এটি আপনাকে আপনার নামের স্থান দেওয়ার সুযোগ দেয় requireযা আপনার কোডে স্বচ্ছতা যুক্ত করতে পারে; যেমনটি অন্য requireমডিউলের সাথে কী মডিউলটি রেফারেন্স করা হচ্ছে তা দেখতে সহজ , aliasআপনাকে বর্ণনামূলক requireএস লিখতে দেয় যা এটিকে স্পষ্ট করে তোলে যে আপনি অভ্যন্তরীণ মডিউলগুলি প্রয়োজন, যেমন egrequire( 'my-project/component' ) । resolve.rootআপনাকে এটিকে আরও নামকরণের সুযোগ না দিয়ে কেবল কাঙ্ক্ষিত ডিরেক্টরিতে চালিত করুন।

— sethro
সূত্র

46

আমি alias: {'~': path.resolve(__dirname)},

— টিলডে উপন্যাসটি

ফাইল এক্সটেনশন ছাড়াই উপ-ডিরেক্টরি আমদানি সমর্থন করার জন্য এই সমাধানটি কীভাবে সামঞ্জস্য করবেন কোনও ইঙ্গিত? @ সেথরো

— ডিমা ফিল্ডম্যান

@ ডিমাফেল্ডম্যান, আপনার অর্থ যুক্তি ( require('mydir/myfile')) এর কোনও এক্সটেনশান নেই ? আসলে কাজ করা উচিত। আপনি একাধিক এন্ট্রি থাকতে পারে alias; আমি srcজাভাস্ক্রিপ্ট মডিউলগুলির জন্য আমার ডিরেক্টরি থেকে আমদানি করতে এবং অন্যটি সিএসএসের জন্য আমার ডিরেক্টরি থেকে আমদানি করতে এটি ব্যবহার করি styles। আমি আপনার প্রশ্নের পুরোপুরি ভুল বুঝেছি কিনা তা আমাকে জানান।

— সেথ্রো

@ সেথ্রো আপনি ঠিক বলেছেন, আমাকে আমার প্রশ্নটি পুনর্বিবেচনা করতে দিন - আমি যা বলতে চাইছিলাম তা হল: আমার একটি ডিরেক্টরি আছে, কম্পোনেন্ট 1 বলুন এবং এই দির ভিতরে আমার একটি কম্পোনেন্ট 1.js নামে একটি ফাইল রয়েছে। ওরফে ব্যবহারের আগে, আমি import './path/to/Component1';কেবল কল করেই ফাইলটি আমদানি করতে পারি - কেবল অভ্যন্তরীণ ফাইলের নাম এবং পথের এক্সটেনশন ছাড়াই। ওয়েবপ্যাকটি কোনওভাবে সনাক্ত করতে সক্ষম হয়েছিল যে ইনার ফাইলটিতে ডিরেক্টরিটির নাম রয়েছে এবং সবেমাত্র এটি আমদানি করা হয়েছে। এখন আমি যা করতে চাই তা হ'ল এটি আমদানি করা হয়: import 'shared\Component1';যখন 'ভাগ' করা হয় তবে এটির নাম। তবে অভ্যন্তরীণ ফাইলের নাম উল্লেখ না করে এটি কাজ করে না। ধন্যবাদ!

— দিমা ফিল্ডম্যান

1

@ ডিমাফেল্ডম্যান দুঃখিত, আপনি যে আচরণটি বর্ণনা করছেন তার সাথে আমি পরিচিত নই; সুতরাং আমি যদি কিছু পরিচিত বৈশিষ্ট্য সম্পর্কে আমি অজ্ঞ থাকি তবে আপনি আমাকে ক্ষমা করতে হবে (আমি এর জন্য ডকুমেন্টেশন খুঁজে পাই না)। আমি ভাবছি যদি আপনার কনফিগারেশনে কিছু লোডার থাকে যা কেবলমাত্র তার অবস্থান নির্দিষ্ট করে (তবে এর ফাইল নাম নয়) নির্দিষ্ট করে মডিউল আমদানির ক্ষমতা সরবরাহ করে? দুঃখিত, আমি কোনও সহায়তা করি না ... আপনার কনফিগার ফাইলটি অন্তর্ভুক্ত করে একটি নতুন প্রশ্ন জিজ্ঞাসা করা ভাল।

— sethro

13

অন্য কেউ যদি এই সমস্যার মুখোমুখি হন তবে আমি এটিকে এভাবে কাজ করতে সক্ষম হয়েছি:

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';

— অ্যালেক্স ক্লিবিস
সূত্র

2

Path.resolve ব্যবহার করে নোড_মডিউলগুলি সমাধান করা ভাল নয়। এটি উপ-নির্ভরতা নিয়ে সমস্যা তৈরি করতে পারে। 'node_modules'পরিবর্তে স্ট্রিং ব্যবহার করুন। [ path.resolve(__dirname, 'src'), 'node_modules' ],

— spencer.sm

@ spencer.sm আমি যদি কেবলমাত্র বর্তমান প্রকল্প থেকে মডিউলগুলি সমাধান করতে চাই? আমার কয়েকটি প্রকল্প রয়েছে যা একে অপর থেকে আমদানি করে। যদি প্রকল্পএ প্রজেক্টবি থেকে ফাইলএ এবং ফাইলএ আমদানি করে তবে lodashআমি lodashকেবলমাত্র এর থেকে সমাধান করতে চাই projectA/node_modules। এই জন্য resolve.modules: [path.resolve(__dirname, 'node_modules')]দরকারী। তবে আপনি যেমন বলেছিলেন তেমন সাব-নির্ভরতা নিয়ে আমি সমস্যায় পড়ছি। নোড_মডিউলগুলির রেজোলিউশনকে সীমাবদ্ধ করার পাশাপাশি উপ-নির্ভরতাগুলি অনুসন্ধান করার জন্য ওয়েবপ্যাককে বলার কি কোনও উপায় আছে projectA/node_modules?

— এরিক গুয়ান

@ spencer.sm ধন্যবাদ! প্রচুর লড়াইয়ের পরে, অবশেষে আপনার সমাধানটি আমার উপ-নির্ভরতার সমস্যাগুলি সমাধান করেছে: ডি

— সাদ আবদুল্লাহ

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আপনার বর্তমান প্রজেক্ট ফাইলে পরিবেশের বর্ণটি সেট করেন তবে এটি আরও ভাল । এটি একটি আরও সর্বজনীন সমাধান এবং আপনি যদি ওয়েবপ্যাক ব্যতীত অন্য সরঞ্জামগুলি ব্যবহার করতে চান তবে এটি সহায়তা করবে: টেস্টিং, লন্টিং ...

— SystematicFrank
সূত্র

3

আমি এটির মতো ওয়েবপ্যাক 2 দিয়ে সমাধান করেছি:

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

আপনি অ্যারে আরও ডিরেক্টরি যুক্ত করতে পারেন ...

— দাম্জন পাভলিকা
সূত্র

সতর্কতা অবলম্বন করুন, পরম এবং আপেক্ষিক পাথগুলি সমানভাবে প্রক্রিয়া করছে না! বিল্ড টাইম ওয়েবপ্যাক.জেএস.আর.জি.

— কনফিগারেশন /

1

এটি উভয় ক্ষেত্রেই কাজ করবে, তবে আপেক্ষিক পথগুলির সাথে বিল্ড (বেশি) সময় নিতে পারে।

— TeChn4K

3

ওয়েবপ্যাক 2 ব্যবহার করে এটি সমাধান হয়েছে:

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

— আকিব
সূত্র

2

আপনি যদি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করেন তবে আপনি কেবল একটি .envফাইল যুক্ত করতে পারেন

NODE_PATH=src/

সূত্র: https://medium.com/@ktruong008/absolve-imports-with-create-react-app-4338fbca7e3d

— ব্রায়ান বার্নস
সূত্র

1

এই থ্রেডটি পুরানো তবে যেহেতু কেউ প্রয়োজনের বিষয়ে পোস্ট করেনি .c প্রবন্ধটি আমি এটি উল্লেখ করতে চলেছি:

আপনি ফোল্ডারটি সেট করে দেখতে প্রয়োজনীয় কনকেক্সটটি ব্যবহার করতে পারেন:

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

return req('./myfile.js')

— altShiftDev
সূত্র

0

কেন কেউ মাইডির পিতামহিত ডিরেক্টরি ওয়েবপ্যাকের মডিউলগুলির ডিরেক্টরিতে অন্তর্ভুক্ত করার পরামর্শ দিয়েছিল তা আমি পাইনি, যাতে কৌশলটি সহজেই করা উচিত:

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

— ড্যানিয়েলে বার্টেলা
সূত্র

0

কেবলমাত্র ব্যাবেল-প্লাগইন-মডিউল-সমাধানকারী ব্যবহার করুন :

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

তারপরে .babelrcযদি আপনার কাছে ইতিমধ্যে একটি না থাকে তবে মূলের নীচে একটি ফাইল তৈরি করুন:

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

এবং মূলের নীচে থাকা সমস্ত কিছুই পরম আমদানি হিসাবে বিবেচিত হবে:

import { Layout } from 'components'

ভিএসকোড / এসলিন্ট সহায়তার জন্য, দেখুন এখানে দেখুন ।

— লুসিয়া
সূত্র

সমাধান করার জন্য ওয়েবপ্যাক সহ পাথের প্রয়োজন

ওয়েবপ্যাক> ২.০

ওয়েবপ্যাক 1.0

ওয়েবপ্যাক কনফিগার

গ্রাহক মডিউল