शीर्ष स्तर जावास्क्रिप्ट आयात - Redux

Question

मैं रेडक्स सीखने की कोशिश कर रहा हूं और मैंने एक त्रुटि में भाग लिया है। मेरे पास केवल दो फाइलें हैं, एक index.html फ़ाइल और main.js फ़ाइल, HTML फ़ाइल में jquery और redux cdns के लिंक हैं। मुझे केवल रेडक्स ट्यूटोरियल में 2.3 मिल गया है (http://redux.js.org/docs/basics/Store.html) और अटक गया हूं। मैं अपने main.js फ़ाइल के शीर्ष पर

import {createStore} from 'redux'; 

है, लेकिन जब मैं आवेदन लोड, मैं

SyntaxError: import declarations may only appear at top level

कह क्या एक 'शीर्ष स्तर है ऊपर लाइन की ओर इशारा करते कोई त्रुटि मिलती है आयात घोषणा'?

यदि यह मदद करता है तो मेरे कोड के लिए यहां एक संकेत है। https://gist.github.com/austincarvey/6e6c8fdc2640b0f9bbfb

Answer 1

import निर्देश वेब ब्राउज़र द्वारा मान्यता प्राप्त नहीं है। यह एक एकल वेब बंडल में अलग-अलग स्रोत फ़ाइलों और तृतीय पक्ष मॉड्यूल को एक साथ जोड़ने के लिए संकलन चरण में उपयोग किया जाता है। अगर यह समझ में नहीं आता है, तो मैंने अत्यधिक बेबेल सीखने और वेबपैक या ब्राउज़र को सीखने की अत्यधिक अनुशंसा की। बैबेल पारदर्शी ईएस 6 और ब्राउजर फ्रेंडली ईएस 5 कोड पर रिएक्ट सिंटैक्स, जबकि वेबपैक/ब्राउजरिफा आपके मॉड्यूल को बंडल करें।

अभी के लिए, यदि आप सिर्फ रेडक्स सीखने के साथ मिलना चाहते हैं, तो आप केवल आयात कथन को हटा सकते हैं और इसके बजाय वैश्विक चर Redux का उपयोग अपने जीस्ट में रेडक्स सीडीएन स्क्रिप्ट द्वारा उजागर कर सकते हैं। अर्थात

var store = Redux.createStore(counterReducer); 

Answer 2

import प्रयोग किया जाता है जब आप एक संदर्भ है कि उन्हें समर्थन में ES6 मॉड्यूल के माध्यम से एक फाइल भी शामिल कर रहे (Browserify/Webpack/आदि ब्राउज़रों के, भविष्य के संस्करणों)।

चूंकि आप <script> टैग के माध्यम से रेडक्स lib सहित शामिल हैं, जो वैश्विक दायरे में Redux सहित देखभाल का ख्याल रखता है।

अपनी जिंदगी के मामले में, यदि आप लाइन एक को मिटते हैं और createStore को Redux.createStore पर 2 9 पर स्थानांतरित करते हैं, तो सब कुछ काम करना चाहिए।