javascript वेबस्टॉर्म में आयात के लिए पथ उपनाम




webstorm webpack (6)

रिकॉर्ड के लिए: PHPSTORM में , लार्वेल मिश्रण के साथ काम करते हुए, मैंने इसे webpack.config.js फ़ाइल को अलग से बनाकर हल करने में कामयाब रहे:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

और फिर इसे webpack.mix.js में आयात करना जैसे:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

सुनिश्चित करें कि वेबपैक कॉन्फ़िगरेशन फ़ाइल को phpStorm की कॉन्फ़िगरेशन में सही ढंग से इंगित किया गया है: सेटिंग्स> भाषाएं और फ्रेमवर्क> जावास्क्रिप्ट> वेबपैक

मैं ES6 मॉड्यूल लोडिंग के लिए वेबपैक पथ उपनाम का उपयोग करता हूं।

उदाहरण के लिए यदि मैं कुछ की बजाय utils लिए उपनाम परिभाषित करता हूं
import Foo from "../../../utils/foo" , मैं कर सकता हूं
import Foo from "utils/foo"

समस्या यह है कि एक बार जब मैं उपनाम का उपयोग शुरू करता हूं, तो वेबस्टॉर्म आयात का ट्रैक खो देता है और मुझे चेतावनियों के साथ छोड़ दिया जाता है और कोई स्वत: पूर्णता नहीं होती है।

क्या ऐसे उपनामों का उपयोग करने के लिए वेबस्टॉर्म को निर्देश देने का कोई तरीका है?


PHPStorm में (वर्तमान में 2017.2 का उपयोग करके), मैं उपनामों के संबंध में वेबपैक कॉन्फ़िगरेशन ठीक से काम करने में सक्षम नहीं हूं।

मेरे फिक्स में मुख्य सेटिंग्स के "निर्देशिका" अनुभाग का उपयोग करना शामिल है। मुझे बस स्रोतों के रूट के रूप में उपनाम द्वारा संदर्भित प्रत्येक फ़ोल्डर को चिह्नित करना था, फिर प्रत्येक के लिए गुण ड्रॉपडाउन पर क्लिक करें और उपनाम को "पैकेज उपसर्ग" के रूप में निर्दिष्ट करें। यह सब मेरे लिए लिंक बना दिया।

सुनिश्चित नहीं है कि वेबस्टॉर्म में निर्देशिका अनुभाग मौजूद है, लेकिन यदि ऐसा होता है, तो यह आयात उपनाम काम करने के लिए एक मूर्ख-प्रमाण विधि प्रतीत होता है।


अभी नहीं , हम अपनी प्रतिक्रिया परियोजना में फ़ाइलों के लिए पथ उपनाम का भी उपयोग कर रहे थे। आयात नाम कम थे, लेकिन हमने वेबस्टॉर्म की स्थिर जांच के साथ-साथ पूर्णता सुविधाओं पर भी बहुत कुछ खो दिया।

बाद में हम कोड को केवल 3 स्तरों की गहराई तक सीमित करने के निर्णय के साथ आए, साथ ही आम भागों के लिए एक स्तर भी। वेबस्टॉम (ctrl + space) की पथ पूर्णता सुविधा टाइपिंग ओवरहेड को कम करने में भी मदद करती है। उत्पादन निर्माण लंबे नामों का उपयोग नहीं करता है, इसलिए अंतिम कोड में शायद ही कोई फर्क पड़ता है।

मैं सुझाव दूंगा कि कृपया उपनामों के बारे में अपने निर्णय पर पुनर्विचार करें। आप node_modules और अपने कोड से आने वाले मॉड्यूल का अर्थपूर्ण अर्थ खो देते हैं, साथ ही साथ अपने कोड को समझने के लिए उपनाम फ़ाइलों को संदर्भित करते हुए, एक बहुत बड़ा ओवरहेड है।


मैं वेबपैक 2017.2 के लिए वेबपैक के भीतर उपनाम स्थापित करने में कामयाब रहा:


[बहिष्कृत उत्तर। WS2017.2 से शुरू हो रहा है वेबस्टॉर्म स्वचालित रूप से पार्स करता है और वेबपैक कॉन्फ़िगरेशन लागू करता है (@anstarovoyt टिप्पणी देखें)]

हाँ वहाँ है।

वास्तव में, वेबस्टॉर्म स्वचालित रूप से पार्स और वेबपैक कॉन्फ़िगरेशन लागू नहीं कर सकता है, लेकिन आप उपनाम को उसी तरह सेट अप कर सकते हैं।

आपको बस संसाधनों के रूट के रूप में "utils" (आपके उदाहरण में) के मूल फ़ोल्डर को चिह्नित करना होगा (राइट-क्लिक करें, निर्देशिका निर्देशिका / संसाधन रूट के रूप में चिह्नित करें)।

हम अभी निम्नलिखित संरचना के साथ काम करने में कामयाब रहे:

/src
    /A
    /B
    /C

हमारे पास वेबपैक में उपनाम के रूप में घोषित एबी और सी फ़ोल्डर्स हैं। और वेबस्टॉर्म में हमने "स्रोत" को "संसाधन रूट" के रूप में चिह्नित किया है।

और अब हम बस आयात कर सकते हैं:

import A/path/to/any/file.js

के बजाय

import ../../../../../A/path/to/any/file.js

जबकि अभी भी वेबस्टॉर्म सही ढंग से पार्सिंग और सभी कोड अनुक्रमणित कर रहा है, फ़ाइलों से लिंक, स्वत: पूर्णता और इतने पर ...


इसका उत्तर एक टिप्पणी में दिया गया है लेकिन लोगों को टिप्पणियों में खोदने और केवल जानकारी को जोड़ने के लिए, यहां यह है:

WS2017.2 के रूप में यह स्वचालित रूप से किया जाएगा । जानकारी blog.jetbrains.com/webstorm/2017/06/…

इसके अनुसार, वेबस्टॉर्म स्वचालित रूप से उपनाम को हल करेगा जो परियोजना की जड़ में webpack.config भीतर शामिल हैं। यदि आपके पास कस्टम संरचना है और आपका webpack.config रूट फ़ोल्डर में नहीं है तो Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack और आपको आवश्यक कॉन्फ़िगरेशन के लिए विकल्प सेट करें।

नोट: अधिकांश सेटअप में base कॉन्फ़िगर होता है जो तब एक dev या prod संस्करण को कॉल करता है। इसके लिए सही तरीके से काम करने के लिए, आपको devst का उपयोग करने के लिए वेबस्टॉर्म को बताना होगा।





es6-module-loader