ইএস 6 রফতানি / সূচী ফাইলটিতে আমদানি

Question

আমি বর্তমানে ওয়েবপ্যাক / বাবেলের মাধ্যমে একটি প্রতিক্রিয়া অ্যাপে ES6 ব্যবহার করছি। আমি মডিউলটির সমস্ত উপাদান সংগ্রহ এবং রফতানি করতে সূচক ফাইলগুলি ব্যবহার করছি। দুর্ভাগ্যক্রমে, এটি দেখতে এরকম দেখাচ্ছে:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

সুতরাং আমি এটিকে অন্য জায়গা থেকে খুব সুন্দরভাবে আমদানি করতে পারি:

import { Comp1, Comp2, Comp3 } from './components';

অবশ্যই এটি খুব সুন্দর সমাধান নয়, তাই আমি ভাবছিলাম, অন্য কোনও উপায় থাকলে। আমি সরাসরি আমদানি করা উপাদানটি রফতানি করতে সক্ষম বলে মনে হচ্ছে না।

Comments

ডিরেক্টরিতে ফাইলগুলি থেকে আমদানি মডিউলগুলির

— Inanc Gumus

Answer 1

আপনি সহজেই ডিফল্ট আমদানি পুনরায় রফতানি করতে পারেন:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

ES7 ES8 এর জন্য একটি প্রস্তাবও রয়েছে যা আপনাকে লিখতে দেবে export Comp1 from '…';।

Comments

এখানে এবং এখানে

— বার্গি

ES8 এর প্রস্তাব ছাড়াও, আপনি সূচি ফাইলগুলি বজায় রাখতে কোড প্রজন্মকে ব্যবহার করতে পারেন। Github.com/gajus/create-index এবং github.com/ryardley/indexr এ একবার দেখুন ।

— গজুস

@ বেরগি এই তিনটি লাইন আমদানি-রপ্তানি উভয়ই করে? বা এটি কি কেবল রফতানি করা হচ্ছে তবে আপনার আর কম্প্যাক 1_ নাম ইত্যাদি নিয়ে ঝাঁকুনির প্রয়োজন নেই?

— musicformellons

@ মিউজিকফোর্মেলনগুলি এগুলি সরাসরি রেফারেন্সযুক্ত মডিউল থেকে রফতানি করে, হ্যাঁ।

— বার্গি

@amann নিজেই একটি চক্রকার রেফারেন্স খারাপ নয়, কিন্তু করতে পারেন কি মডিউল না তার উপর নির্ভর করে সমস্যার হতে। নির্বিশেষে, আমি মনে করি আপনার সমস্ত লাইব্রেরির ইনডেক্স ফাইলে আপনার কেবল এই প্যাটার্নটিই ব্যবহার করা উচিত সমস্ত উপাদান রফতানি করার জন্য, এবং যদি আপনার আন্ত-মডিউল নির্ভরতা থাকে তবে আপনার বড়টি থেকে অংশটি আমদানির পরিবর্তে এগুলি সরাসরি আমদানি করা উচিত। এটির সাথে, এই প্যাটার্ন দ্বারা কোনও বিজ্ঞপ্তি উল্লেখ প্রবর্তন করা হয়নি।

— বার্গি

Answer 2

এছাড়াও, মনে রাখবেন যে আপনার যদি একবারে একাধিক ফাংশন রফতানি করতে প্রয়োজন হয় তবে আপনি যেমন ক্রিয়া ব্যবহার করতে পারেন

export * from './XThingActions';

Comments

হ্যাঁ. দুর্ভাগ্যক্রমে এটি কেবল নামযুক্ত রফতানি গ্রহণ করে, যেমন এটি ডিফল্ট রফতানি অন্তর্ভুক্ত করে না।

— আরনেহুগো

আমাকে পেয়ে যান (বেশ বিভ্রান্তিমূলক ... আমাকে এক মুহুর্ত নিয়েছিল) SyntaxError: Unexpected reserved word, @ বার্গির গৃহীত উত্তরটি কাজ করে।

— ফ্রাঙ্ক নোক্কে

আপনি এই সমস্যাটি পেতে আপনার ডিফল্ট রফতানির নামও দিতে পারেন। এবং আপনার ক্রিয়ায় সত্যই কোনও ডিফল্ট রফতানি হওয়া উচিত নয় যাতে এই সমাধানটি ভালভাবে কাজ করে।

— ব্যারি মাইকেল ডয়েল

সেরা অনুশীলন হ'ল জাভাস্ক্রিপ্টে ডিফল্ট রফতানি, অপ্রয়োজনীয় অতিরিক্ত সিনট্যাক্স ব্যবহার না করা। আধুনিক জাভাস্ক্রিপ্টের জন্য এই থ্রেডে জিএমের সেরা উত্তর রয়েছে।

— mibbit

Answer 3

খুব দেরী হয়েছে তবে আমি যেভাবে সমাধান করেছি তা ভাগ করে নিতে চাই।

রয়ে modelফাইল যা দুই রপ্তানি নামে আছে:

export { Schema, Model };

এবং controllerফাইল রয়েছে যার ডিফল্ট রফতানি রয়েছে:

export default Controller;

আমি এইভাবে indexফাইলটিতে প্রকাশ করেছি :

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

এবং ধরে নিচ্ছি যে আমি তাদের সবকটিই আমদানি করতে চাই:

import { Schema, Model, Controller } from '../../path/';

Comments

আপনি যখন কোনও ফাংশন আমদানি করেন এবং এটি আবার রফতানি করেন তখন কি এটি কাজ করে? আমি চেষ্টা করেছি কিন্তু তা হয়নি।

— আফতাব নাভেদ

দুঃখিত এটি আসলে কাজ করেছিল, আমি আমার পথে / নিখোঁজ ছিলাম।

— আফতাব নাভিদ

Answer 4

কেবল:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

বা ফাংশন নাম দ্বারা:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

আরও ইনফস: https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / স্টেটমেন্টস / এক্সপোর্ট

Answer 5

এর @babel/plugin-proposal-export-default-fromমাধ্যমে ইনস্টল করুন:

yarn add -D @babel/plugin-proposal-export-default-from

আপনার .babelrc.jsonবা কোনও কনফিগারেশন ফাইল প্রকারের মধ্যে

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

এখন আপনি exportসরাসরি একটি থেকে file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

শুভকামনা ...

Comments

বের করে না দিয়ে কীভাবে এটি তৈরি করুন-প্রতিক্রিয়া-অ্যাপের জন্য?

— নেগিন বাসিরি