javascript - ES6 `আনয়ন সংজ্ঞায়িত`




ecmascript-6 babeljs (5)

আপনাকে আপনার 'প্যাকেজ.জসন' এ 'আইসোমরফিক-ফেচ' মডিউল যুক্ত করতে হবে এবং তারপরে এটি আমদানি করতে হবে।

npm install --save isomorphic-fetch es6-promise

তারপরে আপনার কোডে

import "isomorphic-fetch"

https://www.npmjs.com/package/isomorphic-fetch দেখুন

আমি ES6 এবং বাবেল দিয়ে একটি সাইট তৈরি করছি।

একটি স্ক্রিপ্ট ফাইলে, আমার সার্ভারে একটি পরিষেবাতে একটি অজ্যাক্স কল করা দরকার। তার জন্য আমি এইভাবে করছি:

fetch('url').then(
    response => response.json()
).then(
    supervisoryItems => doSomething(supervisoryItems)
)

গুগল ক্রোমে এটি ঠিকঠাক কাজ করে তবে এটি ফায়ারফক্স বা আইই তে কাজ করে না (আমি ত্রুটিটি fetch is undefined দিচ্ছি)। গুগলে অনুসন্ধান করে আমি এটি খুঁজে পেয়েছি এটি ঠিক করা উচিত:

import promise from 'es6-promise'
promise.polyfill()

দুঃখজনকভাবে এটি কিছু পরিবর্তন করে না, আমার একই সমস্যা আছে। কোন সাহায্য?


আমি নিম্নলিখিত দুটি সিডিএন ব্যবহার করব:

<script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>

এই ProvidePlugin বর্ণিত imports-loader এবং exports-loader প্যাকেজগুলির সাথে আপনি ওয়েবপ্যাকের প্রোভাইডপ্লাগিনও ব্যবহার করতে পারেন, যা আপনার কোডে যে কোনও কিছু আমদানির প্রয়োজনীয়তা সরিয়ে দেয়:

config.plugins = [
    new webpack.ProvidePlugin({
      'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    })
];

লেখার সময় whatwg-fetch এর whatwg-fetch সংস্করণ সহ একটি সামঞ্জস্যতার সমস্যা রয়েছে। কর্মক্ষেত্রটি নিম্নলিখিতটি ব্যবহার করছে:

new webpack.ProvidePlugin({
    fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd'
})

জাভাস্ক্রিপ্টে যুক্ত প্রতিটি নতুন কার্যকারিতার জন্য ব্রাউজার সমর্থন রয়েছে। আপনি https://caniuse.com/#feat=fetch এ ব্রাউজার সমর্থন দেখতে পারেন

আইই 11 তে আনার জন্য নিম্নলিখিত 2 টি পদক্ষেপ অনুসরণ করুন

পদক্ষেপ 1: 3 টি প্যাকেজ ইনস্টল করুন

npm i whatwg-fetch @babel/polyfill es6-promise --save

@ ব্যাবেল / পলিফিল - বাবেলে পলিফিল ব্যবহার করতে

হোয়াটএইচজি-ফেচ - আনতে কার্যকারিতা অন্তর্ভুক্ত

es6- প্রতিশ্রুতি - আনার পলিফিল প্রতিশ্রুতি অন্তর্ভুক্ত যা আইই 11 দ্বারা সমর্থিত নয়

পদক্ষেপ 2: ওয়েবপ্যাক.config এন্ট্রি পয়েন্ট যুক্ত করুন

প্রবেশ: ["হোয়াটএইচজি-ফেচ", "@ বাবেল / পলিফিল", "./src/js/index.js"]

 require("es6-promise").polyfill(); const config = { entry: [ "whatwg-fetch", "@babel/polyfill", "./src/js/index.js"], output: { filename: 'bundle.js' }, module: { rules : [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } }; module.exports = config; 

সবে শেষ রাতের মধ্য দিয়ে গেছে। সবশেষে চেষ্টা করার পরে শেষ পর্যন্ত সমাধানটি বেশ সহজ ছিল:

fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)

হয়ে ওঠে

window.fetch('url').then(
response => response.json()
).then(
supervisoryItem => doSomething(supervisoryItem)
)

টিএল; ডিআর ফেচ (স্টাফ) উইন্ডো হওয়া উচিত et ফ্যাচ (স্টাফ) সম্পাদনা এটি ক্রোমে আমার জন্য কাজ করেছে





babeljs