ES2015 আমদানি ফায়ারফক্সে (এমনকি শীর্ষ-স্তরের) কাজ করে না

Question 1

এগুলি আমার নমুনা ফাইলগুলি:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

আমি যখন ফায়ারফক্স 46 এ পৃষ্ঠাটি লোড করি তখন এটি "সিনট্যাক্স এরিয়ার: আমদানির ঘোষণা কেবলমাত্র একটি মডিউলের শীর্ষ স্তরে উপস্থিত হতে পারে" - তবে আমদানি বিবৃতিটি এখানে আরও কত শীর্ষ স্তরের হতে পারে তা আমি নিশ্চিত নই। এই ত্রুটিটি কি একটি লাল রঙের উত্তেজনা, এবং আমদানি / রফতানি কি এখনও সমর্থিত নয়?

Question 2

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

<script src="t1.js" type="module"></script>

আমি ব্রাউজারে ইএস 6 আমদানি ব্যবহার সম্পর্কে এই দস্তাবেজে এটি পেয়েছি । প্রস্তাবিত পঠন.

এই ব্রাউজার সংস্করণগুলিতে সম্পূর্ণরূপে সমর্থিত (এবং পরবর্তীকালে; caniuse.com এ সম্পূর্ণ তালিকা ):

ফায়ারফক্স 60
ক্রোম (ডেস্কটপ) 65
ক্রোম (অ্যান্ড্রয়েড) 66
সাফারি 1.1

পুরানো ব্রাউজারগুলিতে আপনার ব্রাউজারগুলিতে কিছু পতাকা সক্ষম করার প্রয়োজন হতে পারে:

Chrome ক্যানারি 60 - এর মধ্যে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম পতাকা পিছনে chrome:flags।
ফায়ারফক্স 54 - dom.moduleScripts.enabledসেট করা হচ্ছে about:config।
এজ 15 - পরীক্ষামূলক জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলি সেটিং এর পিছনে about:flags।

Question 3

এটি আর সঠিক নয়। সমস্ত বর্তমান ব্রাউজার এখন ES6 মডিউল সমর্থন করে

নীচে মূল উত্তর

importএমডিএন থেকে :

এই বৈশিষ্ট্যটি এই মুহুর্তে কোনও ব্রাউজারে স্থানীয়ভাবে প্রয়োগ করা হয়নি। এটি ট্র্যাসার কম্পাইলার, ব্যাবেল বা রোলআপের মতো অনেক ট্রান্সপ্লায়ারে প্রয়োগ করা হয়।

ব্রাউজারগুলি সমর্থন করে না import।

ব্রাউজার সমর্থন টেবিল এখানে:

আপনি যদি ES6 মডিউলগুলি আমদানি করতে চান তবে আমি একটি ট্রান্সপ্লার ব্যবহার করার পরামর্শ দেব (উদাহরণস্বরূপ, বাবেল )।

Question 4

ফাইল আমদানি করার সময় .js ফাইল এক্সটেনশান ব্যবহার করা একই সমস্যার সমাধান করেছে ( type="moduleস্ক্রিপ্ট ট্যাগে সেট করতে ভুলবেন না )।

সহজভাবে লিখুন:

import foo from 'foo.js';

পরিবর্তে

import foo from 'foo';

Question 5

যোগ type=moduleস্ক্রিপ্ট যা আমদানিতে এবং মডিউল রপ্তানি এই সমস্যার সমাধান হবে।

Question 6

আপনাকে এটির স্ক্রিপ্টের ধরণ নির্দিষ্ট করতে হবে এবং রফতানিটি ডিফল্ট হতে হবে .. আপনার ক্ষেত্রে এটি হওয়া উচিত,

<script src='t1.js' type='module'>

t2.js এর জন্য রফতানির পরে ডিফল্ট ব্যবহার করুন, রফতানি ডিফল্ট 'এখানে আপনার এক্সপ্রেশন যায়' (আপনি এখানে পরিবর্তনশীল ব্যবহার করতে পারবেন না) । আপনি এই মত ফাংশন ব্যবহার করতে পারেন,

export default function print(){ return console.log('hello world');}

এবং আমদানির জন্য, আপনার আমদানি সিনট্যাক্সটি এমন হওয়া উচিত, './t2.js' থেকে মুদ্রণ আমদানি করুন (ফাইল এক্সটেনশন এবং। / একই ডিরেক্টরিতে ব্যবহার করুন) ..আমি আশা করি এটি আপনার পক্ষে কার্যকর হবে!

Question 7

তর্কের খাতিরে ...

বৈশ্বিক উইন্ডো অবজেক্টটিতে একটি কাস্টম মডিউল ইন্টারফেস যুক্ত করতে পারে। যদিও, এটি বাঞ্ছনীয় নয়। অন্যদিকে, ডিওএম ইতিমধ্যে ভেঙে গেছে এবং কিছুই স্থির থাকে না। আমি গতিশীল মডিউলগুলি লোড করতে এবং কাস্টম শ্রোতাদের সাবস্ক্রাইব করতে সর্বদা এটি ব্যবহার করি। এটি সম্ভবত কোনও উত্তর নয়- তবে এটি কার্যকর হয়। স্ট্যাক ওভারফ্লোতে এখন একটি মডিউল.এক্সপোর্ট রয়েছে যা 'স্পার্ক' নামে একটি ইভেন্টকে ডাকে - পাছে রিফ্রেশ না হওয়া পর্যন্ত ...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window