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




webstorm webpack (6)

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

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

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

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


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

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

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


Webstorm webpack.config को नहीं पढ़ सकता है यदि module.exports . module.exports कोई फ़ंक्शन वापस करता है। उदाहरण के लिए

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

अपनी कॉन्फ़िग फ़ाइल की जाँच करें, हो सकता है कि इस कारण से आपको कोई समस्या हो।


यह एक टिप्पणी में उत्तर दिया गया है, लेकिन लोगों को टिप्पणियों में खुदाई करने और केवल जानकारी को लिंक करने के लिए बचाने के लिए, यह है:

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 संस्करण कहता है। इसे ठीक से काम करने के लिए, आपको देवता को उपयोग करने के लिए वेबस्टॉर्म बताने की आवश्यकता है


रिकॉर्ड के लिए: 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 के कॉन्फ़िगरेशन में सही ढंग से बताई गई है: सेटिंग्स> भाषा और रूपरेखा> जावास्क्रिप्ट - वेबपैक


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

हाँ वहाँ है।

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

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

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

/src
    /A
    /B
    /C

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

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

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

के बजाय

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

अभी भी Webstorm को सही ढंग से पार्स करने और सभी कोड को अनुक्रमित करने के दौरान, फाइलों के लिंक, ऑटोकम्प्लीटिंग और इसी तरह ...


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

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

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





es6-module-loader