আমি কীভাবে শর্তাধীন কোনও ES6 মডিউলটি আমদানি করতে পারি?

Question

আমার মতো কিছু করা দরকার:

if (condition) {
    import something from 'something';
}
// ...
if (something) {
    something.doStuff();
}

উপরের কোডটি সংকলন করে না; এটা ছোঁড়ার SyntaxError: ... 'import' and 'export' may only appear at the top level।

আমি এখানেSystem.import প্রদর্শিত হিসাবে ব্যবহার করার চেষ্টা করেছি , কিন্তু কোথা থেকে এসেছে জানি না । এটি কি কোনও ES6 প্রস্তাব যা শেষ না হয়ে গৃহীত হয়েছিল? এই নিবন্ধটি থেকে "প্রোগ্রাম্যাটিক এপিআই" এর লিঙ্কটি আমাকে অবহেলিত ডক্স পৃষ্ঠায় ফেলেছে ।System

Comments

কেবল এটি সাধারণত আমদানি করুন। আপনার মডিউলটি নির্বিশেষে এটির প্রয়োজন।

— অ্যান্ডি

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

— আপনাকে ধন্যবাদ

আমার ব্যবহারের ক্ষেত্রে: itচ্ছিক নির্ভরতা থাকা সহজ করে তুলতে চাই। যদি ডিপ প্রয়োজন হয় না, ব্যবহারকারী এটি থেকে সরান package.json; আমার gulpfileতখন পরীক্ষা করে কিছু বিল্ড স্টেপগুলি সম্পাদন করার আগে সেই নির্ভরতা বিদ্যমান কিনা।

— এরিকোসো

আরেকটি ব্যবহারের ক্ষেত্রে: পরীক্ষার উদ্দেশ্যে। আমি ব্যবহার করছি webpackএবং babelএস 6 এ এস 5 তে স্থানান্তরিত করতে। মত webpack-rewireএবং অনুরূপ প্রকল্পগুলি এখানে সহায়তা করার জন্য নয় - github.com/jhnns/rewire-webpack/issues/12 । পরীক্ষার দ্বিগুণ হওয়ার একটি উপায় বা সমস্যাযুক্ত নির্ভরতা অপসারণের শর্তসাপেক্ষ আমদানি হতে পারে।

— Amio.io

+1 টি। একাধিক পরিবেশে নির্ভরতা যেখানে নির্ভরতা কাজ করতে পারে বা না পারে সেগুলি মডিউল ব্যবহার করতে সক্ষম হওয়া গুরুত্বপূর্ণ, বিশেষত যখন মডিউলগুলি নির্ভর করে কেবলমাত্র ব্রাউজারে কাজ করবে (যেমন webpackস্টাইলশিটগুলিকে মডিউলগুলিতে রূপান্তর করতে ব্যবহৃত হয় যা প্রাসঙ্গিক স্টাইলগুলি সন্নিবেশ করায়) ডোম যখন তারা আমদানি করা হয়) তবে মডিউলটির ব্রাউজারের বাইরেও চালানো দরকার (যেমন ইউনিট পরীক্ষার জন্য)।

— জুলে

Answer 1

ইসিএমএর সাথে আমাদের এখন গতিশীল আমদানির প্রস্তাব রয়েছে। এটি ৩ য় পর্যায়ে রয়েছে এটি ব্যাবেল-প্রিসেট হিসাবেও উপলব্ধ ।

আপনার কেস অনুসারে শর্তাধীন রেন্ডারিং করার উপায় নিম্নলিখিত।

if (condition) {
    import('something')
    .then((something) => {
       console.log(something.something);
    });
}

এটি মূলত একটি প্রতিশ্রুতি দেয়। প্রতিশ্রুতি সমাধানের মডিউলটি আশা করা যায়। প্রস্তাবনায় আরও বৈশিষ্ট্য রয়েছে যেমন একাধিক গতিশীল আমদানি, ডিফল্ট আমদানি, জেএস ফাইল আমদানি ইত্যাদি dyn আপনি এখানে গতিশীল আমদানি সম্পর্কে আরও তথ্য পেতে পারেন ।

Comments

অবশেষে, একটি বাস্তব, ES6 উত্তর! ধন্যবাদ @ থেকোডজ্যাক আসলে এই লেখা হিসাবে 3 ম পর্যায়ে, এখন যে নিবন্ধ অনুযায়ী।

— এরিকোসো

বা যদি আপনি সবেমাত্র রফতানির নাম if (condition) { import('something') .then(({ somethingExported }) => { console.log(somethingExported); }); }

— রেখেছেন তবে

ফায়ারফক্সে এবং যখন চলমান npm run buildআমি এখনও ত্রুটি পাবেন:SyntaxError: ... 'import' and 'export' may only appear at the top level

— কান

@ স্ট্যাকজলি: এই বৈশিষ্ট্যটি এখনও জাভাস্ক্রিপ্ট স্ট্যান্ডার্ডের অংশ নয়, এটি কেবলমাত্র একটি পর্যায়ে 3 প্রস্তাব! তবে এটি ইতিমধ্যে অনেক নতুন ব্রাউজারে প্রয়োগ করা হয়েছে, caniuse.com/#feat=es6-module-dynamic-import দেখুন ।

— কনরাড হাফনার

এই শর্তসাপেক্ষ গতিশীল আমদানি ফাংশনটিতে "Y থেকে X আমদানি করে" কেবলমাত্র নির্দিষ্ট উপাদানগুলি আমদানি করার সূক্ষ্ম গ্রেড ক্ষমতা নেই। প্রকৃতপক্ষে জরিমানা দানযোগ্য ক্ষমতা গতিশীল লোডিংয়ে আরও গুরুত্বপূর্ণ হতে পারে (প্রিপ্রোসেস বান্ডিলিংয়ের বিপরীতে)

— ক্রেগ হিক্স

Answer 2

আপনি যদি চান, আপনি প্রয়োজন ব্যবহার করতে পারে। এটি শর্তাধীন প্রয়োজনের বিবৃতি পাওয়ার একটি উপায়।

let something = null;
let other = null;

if (condition) {
    something = require('something');
    other = require('something').other;
}
if (something && other) {
    something.doStuff();
    other.doOtherStuff();
}

Comments

আমি মনে করি কিছু এবং অন্যান্য ভেরিয়েবলগুলি কন্সট ব্যবহার করে ডিক্লার্সড যা ব্লক স্কোপড, তাই দ্বিতীয়টি যদি শর্তটি ফেলে দেয় যে কোনও কিছু সংজ্ঞায়িত করা হয়নি

— মোহাম্মদ এসেইমি

'Var' ব্যবহার না করে এবং ব্লক স্কোপ পুরোপুরি এড়িয়ে যাওয়ার পরিবর্তে ব্লকের বাইরে দুটি ভেরিয়েবল ব্যবহার করা এবং ঘোষণা করা আরও ভাল।

— ভোরকান

উত্তোলন এই ক্ষেত্রে কিছু প্রভাবিত করে? আমি এমন কিছু সমস্যায় পড়েছি যেখানে উত্তোলনের অর্থ হ'ল মেমোরিটি যদি পরিষেবা দেয় তবে এর নিদর্শন অনুসরণ করার সময় আমি অপ্রত্যাশিতভাবে একটি পাঠাগার আমদানি করেছি।

— থমাস

এটি চিহ্নিত করা দরকার যে require()এটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের অংশ নয় - এটি নোড.জেএস-তে একটি অন্তর্নির্মিত ফাংশন, তাই কেবলমাত্র সেই পরিবেশে কার্যকর। ওপি নোড.জেএস এর সাথে কাজ করার কোনও ইঙ্গিত দেয় না OP

— ভেলোজেট

Answer 3

আপনি শর্তাধীন আমদানি করতে পারবেন না, তবে আপনি বিপরীতে করতে পারেন: শর্তাধীন কিছু রফতানি করুন। এটি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে, সুতরাং আপনার চারপাশের এই কাজটি আপনার জন্য নাও হতে পারে।

আপনি করতে পারেন:

api.js

import mockAPI from './mockAPI'
import realAPI from './realAPI'

const exportedAPI = shouldUseMock ? mockAPI : realAPI
export default exportedAPI

apiConsumer.js

import API from './api'
...

আমি মিক্সপ্যানেল ইত্যাদির মতো বিশ্লেষণমূলক লিবগুলি উপহাস করার জন্য এটি ব্যবহার করি ... কারণ আমার বর্তমানে একাধিক বিল্ড বা আমাদের সীমান্ত থাকতে পারে না। সবচেয়ে মার্জিত নয়, তবে কাজ করে works পরিবেশের উপর নির্ভর করে আমার এখানে কয়েকটি 'যদি' রয়েছে কারণ মিশ্রপ্যানেলের ক্ষেত্রে এটির সূচনা প্রয়োজন।

Comments

এই সমাধানটি অবাঞ্ছিত মডিউলগুলি লোড হওয়ার কারণ, তাই কোনও অনুকূল সমাধান নয় I

— ইসমাইলালিক

উত্তরে যেমন বলা হয়েছে, এটি প্রায় কাজের কাজ। সেই সময়ে, সহজভাবে কোনও সমাধান হয়নি। ES6 আমদানি গতিশীল নয়, এটি নকশা দ্বারা। বর্তমানে গৃহীত উত্তরে বর্ণিত ES6 গতিশীল আমদানি ফাংশন প্রস্তাব এটি করতে পারে it জেএস বিকশিত হচ্ছে :)

— কেভ

Answer 4

উত্তরটি দেখে মনে হচ্ছে এটি এখন পর্যন্ত আপনি পারবেন না।

http://exploringjs.com/es6/ch_modules.html#sec_module-loader-api

আমি মনে করি উদ্দেশ্যটি যথাসম্ভব স্থির বিশ্লেষণ সক্ষম করা এবং শর্তাধীন আমদানি করা মডিউলগুলি এটি ভেঙে দেয়। উল্লেখ করার মতো বিষয় - আমি বাবেল ব্যবহার করছি , এবং আমি অনুমান করছি যে Systemবাবেল দ্বারা সমর্থিত নয় কারণ মডিউল লোডার API কোনও ES6 স্ট্যান্ডার্ডে পরিণত হয়নি।

Comments

@ ফেলিক্সকলিং এটির নিজস্ব উত্তর তৈরি করুন এবং আমি আনন্দের সাথে এটি গ্রহণ করব!

— এরিকোসো

Answer 5

require()রান সময়টিতে কিছু মডিউল আমদানির একটি উপায় এবং এটি importস্ট্রিং আক্ষরিক পথগুলির সাথে ব্যবহারের মতো স্থির বিশ্লেষণের জন্যও সমানভাবে যোগ্যতা অর্জন করে। বান্ডিলটির জন্য নির্ভরতা বাছতে এটি বান্ডলার দ্বারা প্রয়োজনীয়।

const defaultOne = require('path/to/component').default;
const NamedOne = require('path/to/component').theName;

সম্পূর্ণ স্থিতিশীল বিশ্লেষণ সমর্থন সহ গতিশীল মডিউল রেজোলিউশনের জন্য, একটি সূচক (সূচি.জেএস) এর প্রথম সূচি মডিউল এবং হোস্ট মডিউলটিতে আমদানি সূচক।

// index.js
export { default as ModuleOne } from 'path/to/module/one';
export { default as ModuleTwo } from 'path/to/module/two';
export { SomeNamedModule } from 'path/to/named/module';

// host.js
import * as indexer from 'index';
const moduleName = 'ModuleOne';
const Module = require(indexer[moduleName]);

Comments

এটি চিহ্নিত করা দরকার যে require()এটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের অংশ নয় - এটি নোড.জেএস-তে একটি অন্তর্নির্মিত ফাংশন, তাই কেবলমাত্র সেই পরিবেশে কার্যকর। ওপি নোড.জেএস এর সাথে কাজ করার কোনও ইঙ্গিত দেয় না OP

— ভেলোজেট

Answer 6

আপনি যদি গতিশীল আমদানি ওয়েবপ্যাক মোড ব্যবহার করেন তবে গুরুত্বপূর্ণ পার্থক্য eager:

if (normalCondition) {
  // this will be included to bundle, whether you use it or not
  import(...);
}

if (process.env.SOMETHING === 'true') {
  // this will not be included to bundle, if SOMETHING is not 'true'
  import(...);
}

Comments

কিন্তু importএকটি প্রতিশ্রুতি ফিরে।

— newguy

Answer 7

এটি একটি অবিস্মরণীয় বিষয়টিকে অস্পষ্ট করে দেওয়া আমার জন্য কাজ করেছিল, এটি স্থির বিশ্লেষক থেকে লুকিয়ে রাখে ...

if (typeof __CLI__ !== 'undefined') {
  eval("require('fs');")
}

Comments

কেউ উত্তর দিতে পারে কেন এই উত্তর হ্রাস করা হয়েছে? সত্যিকারের কোনও ত্রুটি রয়েছে কি না এটি কেবল দুষ্ট কীওয়ার্ড 'ইভাল' এর প্রতি স্বয়ংক্রিয় নেতিবাচক প্রতিক্রিয়া ছিল?

— ইউরি গোর

ঘৃণ্য ইভাল কীওয়ার্ডটি ব্যবহারের জন্য স্বয়ংক্রিয় ডাউনভোট। দূরে থাকা.

— টর্মোড হগেইন

আপনি কি এখানে ব্যাখ্যা করতে পারবেন যে eval@ টারমডহজিনের ব্যবহারের সাথে আসলে কী ভুল ?

— অ্যাডাম বার্নেস

এমডিএন কেন evalব্যবহার করা উচিত নয় তা বেশ কয়েকটি কারণের যোগফল দেয় । সাধারণভাবে: যদি আপনার ব্যবহারের প্রয়োজন মনে হয় তবে আপনি evalসম্ভবত এটি ভুল করছেন এবং আপনার বিকল্পগুলি বিবেচনা করার জন্য একটি পদক্ষেপ ফিরে নেওয়া উচিত। সম্ভবত এমন কিছু পরিস্থিতি রয়েছে যেখানে ব্যবহার evalকরা সঠিক, তবে আপনি সম্ভবত এর মধ্যে একটিরও মুখোমুখি হন নি।

— টর্মোড হউজিন

এটি চিহ্নিত করা দরকার যে require()এটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের অংশ নয় - এটি নোড.জেএস-তে একটি অন্তর্নির্মিত ফাংশন, তাই কেবলমাত্র সেই পরিবেশে কার্যকর। ওপি নোড.জেএস এর সাথে কাজ করার কোনও ইঙ্গিত দেয় না OP

— ভেলোজেট

Answer 8

আমি তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশনটি ব্যবহার করে এটি অর্জন করতে সক্ষম হয়েছি এবং বিবৃতি প্রয়োজন।

const something = (() => (
  condition ? require('something') : null
))();

if(something) {
  something.doStuff();
}

Comments

এটি চিহ্নিত করা দরকার যে require()এটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের অংশ নয় - এটি নোড.জেএস-তে একটি অন্তর্নির্মিত ফাংশন, তাই কেবলমাত্র সেই পরিবেশে কার্যকর। ওপি নোড.জেএস এর সাথে কাজ করার কোনও ইঙ্গিত দেয় না OP

— ভেলোজেট

Answer 9

শর্তসাপেক্ষে আমদানিগুলি একটি বার্ষিকী এবং require()এর মাধ্যমেও অর্জন করা যেতে পারে :

const logger = DEBUG ? require('dev-logger') : require('logger');

এই উদাহরণটি ES লিন্টের গ্লোবাল-প্রয়োজনীয় নথি থেকে নেওয়া হয়েছিল: https://eslint.org/docs/rules/global-require

Comments

এটি চিহ্নিত করা দরকার যে require()এটি স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের অংশ নয় - এটি নোড.জেএস-তে একটি অন্তর্নির্মিত ফাংশন, তাই কেবলমাত্র সেই পরিবেশে কার্যকর। ওপি নোড.জেএস এর সাথে কাজ করার কোনও ইঙ্গিত দেয় না OP

— ভেলোজেট

Answer 10

কীভাবে গতিশীল আমদানি কাজ করে তার স্পষ্ট বোঝার জন্য এই উদাহরণটি দেখুন।

গতিশীল মডিউল আমদানি উদাহরণ

মডিউলগুলি আমদানি ও রফতানি করার প্রাথমিক বোঝাপড়া থাকা।

জাভাস্ক্রিপ্ট মডিউলগুলি গিথুব

জাভাস্ক্রিপ্ট মডিউলগুলি MDN

Answer 11

না, আপনি পারবেন না!

যাইহোক, এই সমস্যাটিতে ঝাঁপিয়ে পড়ে আপনি কীভাবে আপনার কোডটি সংগঠিত করছেন সে সম্পর্কে আপনাকে পুনর্বিবেচনা করতে হবে।

ES6 মডিউলগুলির আগে, আমাদের কমনজেএস মডিউল ছিল যা প্রয়োজনীয় () সিনট্যাক্স ব্যবহার করে। এই মডিউলগুলি "গতিশীল" ছিল যার অর্থ আমরা আমাদের কোডের শর্তাবলীর ভিত্তিতে নতুন মডিউল আমদানি করতে পারি। - উত্স: https://bitofco.de/hat-is-tree-shaking/

আমি মনে করি যে ES6 এর পরে তারা সমর্থনটি বাদ দিয়েছিল তার একটি কারণ হ'ল এটি সংকলন করা খুব কঠিন বা অসম্ভব বলে মনে হয়।