বাবেল 6 এটি কীভাবে ডিফল্ট রফতানি করে তা পরিবর্তন করে

Question

আগে, বাবেল লাইন যুক্ত করবে module.exports = exports["default"]। এটি আর এটি করে না। এর আগে যা বোঝায় তা হ'ল:

var foo = require('./foo');
// use foo

এখন আমাকে এটি করতে হবে:

var foo = require('./foo').default;
// use foo

একটি বিশাল চুক্তি নয় (এবং আমি অনুমান করছি এটিই এর সাথে হওয়া উচিত ছিল)। সমস্যাটি হ'ল আমার কাছে প্রচুর কোড রয়েছে যা জিনিসগুলি যেভাবে ব্যবহৃত কাজ করে তার উপর নির্ভর করে (আমি এর বেশিরভাগটি ES6 আমদানিতে রূপান্তর করতে পারি, তবে এটির সমস্ত নয়)। আমার প্রকল্পের মধ্য দিয়ে না গিয়ে কীভাবে আমাকে পুরানো পথে কাজ করতে হবে তার টিপস দিতে পারেন এবং এটি সমাধান করার জন্য (বা এটি করার জন্য কোডমড কীভাবে লিখবেন সে সম্পর্কে কিছু নির্দেশও বেশ চটুল হবে)।

ধন্যবাদ!

উদাহরণ:

ইনপুট:

const foo = {}
export default foo

বাবেল 5 দিয়ে আউটপুট

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

বাবেল 6 (এবং es2015 প্লাগইন) এর সাথে আউটপুট:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

লক্ষ্য করুন আউটপুট মধ্যে একমাত্র পার্থক্য হয় module.exports = exports["default"]।

---

সম্পাদন করা

আমার নির্দিষ্ট সমস্যাটি সমাধান করার পরে আমি এই ব্লগপোস্টটিতে আগ্রহী হতে পারি: ভুল বোঝার ES6 মডিউলগুলি, বাবেল, অশ্রু এবং একটি সমাধান আপগ্রেড করা

Comments

আমি কৌতূহলী, requireআপনি যদি বাবেল ব্যবহার করে এমন কোনও কোডবেসে কাজ করে থাকেন তবে কী কী দরকার ? সম্ভাবনা রয়েছে, এমন অন্যান্য পন্থা রয়েছে যা আপনাকে যেভাবেই এড়াতে দেয় allow

— লগানফস্মিথ

আমি ওয়েবপ্যাকের এমন একটি বৈশিষ্ট্য উপস্থাপন করছি যা মৃত কোডে পাওয়া গেলে কোডের প্রয়োজন হবে না: if (false) { require('./foo') }ওয়েবপ্যাক সহ foo.jsফলাফলটি বান্ডিল সহ আসলেই এড়িয়ে যাবে ।

— ক্যান্টকড্ডস

falseসেখানে আপনার টগল হওয়ার কি শেষ ? যদি এটির এমন একটি শর্ত থাকে যা আপনার ওয়েবপ্যাক কনফিগারেশনে পাওয়া যায় তবে অন্য কোনও বিকল্প থাকতে পারে।

— লোগানফস্মিথ

এই এক বিট আমাকে। ধন্যবাদ @ কেন্টকডডস

— টাইলার ম্যাকগিনিস

আমি এই পোস্টটি খুঁজে পাওয়ার আগে এটি আমার কয়েক ঘন্টা ধরে সমস্যা সৃষ্টি করেছিল। আমি আমার সব প্রতিস্থাপন শেষ পর্যন্ত export default {foo, bar}সঙ্গে module.exports = {foo, bar}। আমি ভুল পদ্ধতিটি পছন্দ করেছি যা এখন সমর্থিত নয়।

— হোঁচট খেয়ে

Answer 1

পুরানো আচরণ ফিরে পেতে আপনি এই প্লাগইনটি ব্যবহার করতে পারেন export।

Comments

আমি জানতাম যে কেউ তাড়াতাড়ি বা পরে একটি প্লাগইন লিখবে। ধন্যবাদ!

— ক্যান্টকড্ডস

দু: খজনকভাবে ব্যাবেল-প্লাগইন-অ্যাড-মডিউল-রফতানিগুলি

— আমড

আমার প্রকল্পের এএমডি মডিউলগুলির মধ্যে একই সমস্যাটি সমাধান করতে আমি ব্যাবেল-প্লাগইন-ট্রান্সফর্ম-এস -2015-মডিউলস-সিম্পল- এএমডি ব্যবহার করেছি

— টম ওয়েইসন

আমি মনে করি ইউএমডি এবং এই প্লাগইনটি ব্যবহার করার উপায়! ধন্যবাদ

— ইলেক্ট্রনিক্স

খুব খুব সহায়ক।

— জোভিকা আলেক্সিক

Answer 2

আপনি যদি কমনজেএস রফতানি আচরণ চান, আপনার সরাসরি কমনজেএস ব্যবহার করতে হবে (বা অন্য উত্তরে প্লাগইন ব্যবহার করুন)। এই আচরণটি সরানো হয়েছে কারণ এটি বিভ্রান্তির কারণ এবং অবৈধ ES6 শব্দার্থবিজ্ঞানের দিকে পরিচালিত করে, যা কিছু লোক উদাহরণস্বরূপ নির্ভর করেছিল

export default {
  a: 'foo'
};

এবং তারপর

import {a} from './foo';

যা অবৈধ ES6 তবে আপনার বর্ণনা করা সাধারণ জেএস আন্তঃব্যবহার আচরণের কারণে এটি কাজ করেছে। দুর্ভাগ্যক্রমে উভয় ক্ষেত্রেই সমর্থন করা সম্ভব নয়, এবং লোককে অবৈধ ES6 লেখার অনুমতি দেওয়া আপনার চেয়ে আরও খারাপ সমস্যা .default।

অন্য সমস্যাটি হ'ল এটি ব্যবহারকারীদের জন্য ভবিষ্যতে যদি একটি নামী রফতানি যোগ করে তবে তা অপ্রত্যাশিত

export default 4;

তারপর

require('./mod');
// 4

কিন্তু

export default 4;
export var foo = 5;

তারপর

require('./mod')
// {'default': 4, foo: 5}

Comments

আমি আপনার সাথে একমত (এবং উল্লেখিত) যে পূর্বের আচরণটি ভুল ছিল তবে আমার প্রশ্নটি কীভাবে সমস্যাটি ঘটাতে হবে তা ছিল। আমি ভুল আচরণের উপর প্রচুর নির্ভর করেছিলাম (বুঝতে পারিনি যে এটি আজ সকাল পর্যন্ত এটি ভুল ছিল)। আমি একবারে সব কিছু আপডেট না করার পছন্দ করব ...

— কেন্টকড্ডস

বর্তমান আচরণটি পাওয়ার একমাত্র ফিক্সটি হ'ল আপনার কোডটি সরাসরি কমনজেএস ব্যবহার করতে স্যুইচ করা বা আপনার আপডেট করার সময় না পাওয়া পর্যন্ত বাবেল 5 এ থাকা।

— লগানফস্মিথ

@ কেন্টকডডস এই কাজটি চালিয়ে যাওয়ার জন্য আমরা একটি ওয়েবপ্যাক লোডার লিখতে পারি (বা ব্যাবেল প্লাগইন)। আমি অবাক হয়েছি তারা একটি সরবরাহ করছে না (বা পরিবর্তনটি আরও বেশি প্রচার করছে!)

— জামুন্ড ফার্গুসন

আমি এতে বিভ্রান্ত হয়ে পড়েছি ... আমি export default function () {}যদি মডিউল এ এবং তারপরে import a from 'a'মডিউল বি তে করি তবে বাবেল 6 aহবে { default: function () {} }... এক্সপ্লোরিং js.com/es6/… থেকে আমি যা বুঝতে পারি তা থেকে এটি কাজ করা উচিত এবং আমার রফতানি হওয়া উচিত বি মধ্যে ফাংশন, না বস্তু।

— mamapitufo

@ মামাপিটোফো এটির কাজ করা উচিত, তবে উদাহরণটি না দেখলে কী ভুল হয়েছে তা বলা শক্ত। আপনি চ্যাট করতে চাইলে স্লেকে বাবেলের সমর্থন চ্যানেলটি নির্বিঘ্নে বাদ পড়ুন।

— লোগানফস্মিথ

Answer 3

গ্রন্থাগারের লেখকদের জন্য আপনি এই সমস্যাটি ঘিরে কাজ করতে সক্ষম হতে পারেন।

আমার সাধারণত একটি এন্ট্রি পয়েন্ট থাকে, index.jsযা প্রধান ক্ষেত্রের মধ্যে ফাইলটি আমি নির্দেশ করি package.json। এটি লাইবের আসল প্রবেশ বিন্দুটিকে পুনরায় রফতানি করা ছাড়া আর কিছুই করে না:

export { default } from "./components/MyComponent";

বাবেল ইস্যুটির সমাধানের জন্য, আমি এটিকে একটি importবিবৃতিতে পরিবর্তন করেছি এবং তারপরে ডিফল্টটি এ module.exports:

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

আমার অন্যান্য সমস্ত ফাইল খাঁটি ES6 মডিউল হিসাবে থাকবে, কোনও কর্মক্ষেত্র নেই। সুতরাং কেবল এন্ট্রি পয়েন্টটিতে সামান্য পরিবর্তন দরকার :)

এটি কমনজ প্রয়োজনীয়গুলির জন্য এবং ইএস 6 আমদানির জন্যও কাজ করবে কারণ বাবেলটি বিপরীত আন্তঃনীতি ফেলেছে বলে মনে হচ্ছে না (সাধারণ -> এস 6)। বাবেল সাধারণ ফাংশনগুলি প্যাচ করতে নিম্নলিখিত ফাংশনটিকে ইনজেক্ট করে:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

আমি এই লড়াইয়ে ঘন্টা কাটিয়েছি, তাই আমি আশা করি এটি অন্য কারও প্রচেষ্টা বাঁচায়!

Comments

কিছু কারণে, আমি কখনই আমার মাথাগুলি ঠিক মতো জিনিস module.exportsএবং export defaultজিনিসগুলি স্পিনি করতে পারি না । এখন আমরা আবার এক বর্গে ফিরে এসেছি?

— উইন্ডমায়াও

@ উইন্ডমোমাও আপনার মানে কি? এটি এমন একটি কৌশল যাতে সাধারণ ব্যবহারকারীরা যাতে না থাকেন require("whatever").default। আপনি যদি কোনও গ্রন্থাগারের লেখক না হন তবে সম্ভবত এটি অপ্রাসঙ্গিক

— উইকিনিলিয়ামস

Answer 4

আমি এ জাতীয় সমস্যা ছিল। এবং এটি আমার সমাধান:

//src/arithmetic.js

export var operations = {
  add: function (a, b) {
      return a + b;
  },

  subtract: function (a, b) {
      return a - b;
  }
};

//src/main.js

import { operations }  from './arithmetic';

let result = operations.add(1, 1);

console.log(result);