बैबेल 6 बदलता है कि यह डिफ़ॉल्ट रूप से कैसे निर्यात करता है

Question

इससे पहले, बेबल लाइन जोड़ देगा module.exports = exports["default"]। यह अब ऐसा नहीं है। इससे पहले कि मैं क्या कर सकता है इसका मतलब है:

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

अब मुझे यह करना है:

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

बहुत बड़ी बात नहीं है (और मैं यह अनुमान लगा रहा हूं कि यह सब साथ होना चाहिए था)। मुद्दा यह है कि मेरे पास बहुत सारे कोड हैं जो उस तरीके पर निर्भर करते हैं जिस तरह से चीजें काम करती थीं (मैं इसे ज्यादातर ईएस 6 आयात में बदल सकता हूं, लेकिन यह सब नहीं)। क्या कोई मुझे मेरी परियोजना के माध्यम से जाने के बिना पुराने तरीके से काम करने के तरीके के बारे में सुझाव दे सकता है और इसे ठीक कर सकता है (या ऐसा करने के लिए कोडमॉड लिखने के लिए कुछ निर्देश भी बहुत चालाक होगा)।

धन्यवाद!

उदाहरण:

इनपुट:

const foo = {}
export default foo

बबैल 5 के साथ आउटपुट

"use strict";

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

Babel 6 (और es2015 प्लगइन) के साथ आउटपुट:

"use strict";

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

ध्यान दें कि आउटपुट में एकमात्र अंतर है module.exports = exports["default"]।

---

संपादित करें

आप इस ब्लॉगपोस्ट में दिलचस्पी ले सकते हैं जो मैंने अपने विशिष्ट मुद्दे को हल करने के बाद लिखा था: गलतफहमी ES6 मॉड्यूल, अपग्रेड बैबल, आँसू और एक समाधान

Comments

मैं उत्सुक हूँ, ऐसे कौन से मामले हैं जहाँ requireअगर आपको एक कोडबेस में काम करना पड़ रहा है जो बैबेल का उपयोग करता है? संभावना है, अन्य दृष्टिकोण हैं जो आपको वैसे भी बचने की अनुमति देंगे।

— loganfsmyth

मैं वेबपैक की एक सुविधा का लाभ उठा रहा हूं जिसे कोड की आवश्यकता नहीं होगी यदि यह मृत कोड में पाया जाता है जैसे: if (false) { require('./foo') }वेबपैक foo.jsके परिणामस्वरूप परिणामी बंडल में वास्तव में शामिल होगा ।

— kentcdodds

क्या falseवहाँ अपने टॉगल किया जा रहा है ? यदि यह एक शर्त है जो आपके वेबपैक विन्यास में उपलब्ध है, तो एक और विकल्प हो सकता है।

— loganfsmyth

यह एक बिट मुझे भी। धन्यवाद @kentcdodds

— टायलर मैकगिनिस

इससे पहले कि मुझे यह पोस्ट मिले, यह मुझे घंटों तक परेशान करता था। मैं अपने के सभी जगह समाप्त हो गया export default {foo, bar}साथ module.exports = {foo, bar}। मुझे गलत तरीका पसंद आया जो अब समर्थित नहीं है।

— stumct

Answer 1

पुराने व्यवहार को वापस पाने के लिए आप इस प्लगइन का उपयोग कर सकते हैं export।

Comments

मुझे पता था कि कोई जल्दी या बाद में एक प्लगइन लिखेगा। धन्यवाद!

— kentcdodds

दुख की बात है बबेल-प्लगइन-ऐड-मॉड्यूल-एक्सपोर्ट्स

— एम डी

मैंने अपनी परियोजना में इसी मुद्दे को हल करने के लिए बैबल-प्लगइन-ट्रांसफॉर्म-एसस २०१५-मॉड्यूल्स-सरल-एएमडी का उपयोग किया है जिसमें एएमडी मॉड्यूल हैं

— टॉम

मुझे लगता है कि यूएमडी का उपयोग करना और यह प्लगइन जाने का रास्ता है! धन्यवाद

— electronix384128

बहुत मददगार।

— जोविका एलेक्सी

Answer 2

यदि आप कॉमनजेएस निर्यात व्यवहार चाहते हैं, तो आपको कॉमनजेएस का सीधे उपयोग करना होगा (या दूसरे उत्तर में प्लगइन का उपयोग करना होगा)। इस व्यवहार को हटा दिया गया था क्योंकि इससे भ्रम की स्थिति पैदा हो गई और अमान्य ES6 शब्दार्थवाद पैदा हो गया, जिसे कुछ लोगों ने उदाहरण के लिए भरोसा किया था

export default {
  a: 'foo'
};

और फिर

import {a} from './foo';

जो कि ES6 अमान्य है, लेकिन आपके द्वारा बताए जा रहे कॉमनजर्स इंटरऑपरेबिलिटी व्यवहार के कारण काम किया है। दुर्भाग्यवश दोनों मामलों का समर्थन करना संभव नहीं है, और लोगों को अमान्य ईएस 6 लिखने की अनुमति देना आपको बनाने से भी बदतर मुद्दा है .default।

दूसरा मुद्दा यह था कि यह उपयोगकर्ताओं के लिए अप्रत्याशित था यदि उन्होंने भविष्य में एक नामित निर्यात जोड़ा, उदाहरण के लिए

export default 4;

फिर

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

परंतु

export default 4;
export var foo = 5;

फिर

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

Comments

मैं आपसे सहमत हूं (और नोट किया गया) कि पहले का व्यवहार गलत था, लेकिन मेरा सवाल यह था कि इस मुद्दे को कैसे सुलझाया जाए। मैं गलत व्यवहार पर बहुत भरोसा कर रहा था (यह एहसास नहीं हुआ कि यह आज सुबह तक गलत था)। मैं एक बार में सब कुछ अपडेट नहीं करना पसंद करूंगा ...

— kentcdodds

वर्तमान व्यवहार को प्राप्त करने के लिए एकमात्र फिक्स कॉमनज का उपयोग करने के लिए सीधे अपने कोड को स्विच करना होगा, या जब तक आपके पास अपडेट करने का समय नहीं है, तब तक बैबिल 5 पर बने रहें।

— loganfsmyth

@kentcdodds हम इस काम (या एक कोलाहल प्लगइन) को रखने के लिए एक वेबपैक लोडर लिख सकते हैं। मुझे आश्चर्य है कि वे एक प्रदान नहीं कर रहे हैं (या परिवर्तन को अधिक सार्वजनिक रूप से प्रचारित कर रहे हैं!)

— Jamund Ferguson

मैं इस से उलझन में हूँ ... अगर मैं ऐसा export default function () {}मॉड्यूल एक में और फिर import a from 'a'कोलाहल 6 के साथ मॉड्यूल बी में, aहो सकता है { default: function () {} }... से मैं क्या से समझ सकते हैं exploringjs.com/es6/... इस काम करना चाहिए और मैं निर्यात मिलना चाहिए B में कार्य करते हैं, वस्तु नहीं।

— मामापिटुफो

@mamapitufo यह काम करना चाहिए, लेकिन यह कहना मुश्किल है कि उदाहरण के बिना क्या गलत है। अगर आप चैट करना चाहते हैं तो बेबल के सपोर्ट चैनल द्वारा स्लैक पर ड्रॉप करें।

— लोगनफ़्समीथ

Answer 3

पुस्तकालय लेखकों के लिए आप इस समस्या को हल करने में सक्षम हो सकते हैं।

मेरे पास आम तौर पर एक प्रवेश बिंदु है, index.jsजो कि मुख्य क्षेत्र से फ़ाइल I बिंदु है package.json। यह लिब के वास्तविक प्रवेश बिंदु को फिर से निर्यात करने के अलावा कुछ नहीं करता है:

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

बाबेल मुद्दे को हल करने के लिए, मैंने इसे एक importबयान में बदल दिया और फिर डिफ़ॉल्ट को असाइन करें module.exports:

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

मेरी सभी अन्य फाइलें शुद्ध ES6 मॉड्यूल के रूप में रहती हैं, जिसमें कोई वर्कअराउंड नहीं है। तो केवल प्रवेश बिंदु को थोड़ा बदलाव की आवश्यकता है :)

यह सामान्य आवश्यकता के लिए काम करेगा, और ES6 आयात के लिए भी क्योंकि बेबल ने रिवर्स इंटरॉप (commonjs -> es6) को गिराया नहीं लगता है। बैजल ने आमजन को परेशान करने के लिए निम्न कार्य किया है:

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