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

Question

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

उदाहरण के लिए, अगर मुझे किसी utilsचीज़ के बदले एक उपनाम मिलता है
import Foo from "../../../utils/foo", तो मैं कर सकता हूँ
import Foo from "utils/foo"

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

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

Answer 1

हाँ वहाँ है।

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

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

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

/src
    /A
    /B
    /C

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

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

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

के बजाय

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

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

Comments

यह प्रभावी रूप से चीजों को तोड़ देगा जब सीधे वेबस्टॉर्म से निर्माण नहीं होगा

— maddrag0n

वेबस्टॉर्म 2016.2.3 में मैंने कोशिश की है, लेकिन यह समाधान काम नहीं करता है।

— राशन

और कोणीय 2 में आयात के बारे में क्या import { Component } from '@angular/core', वह भी हल हो गया है। मैं यह atस्पष्ट करने के लिए कैसे लागू कर सकता हूं कि मार्ग एक उपनाम है?

— हिटमंड्स

@Toosick इस ब्लॉगपोस्ट को देखें ब्लॉग .jetbrains.com

— webstorm/

कई फ़ोल्डर्स और कई वेबपैक कॉन्फ़िगर के बारे में क्या? शायद इस वजह से मेरे लिए काम नहीं करता है: "डिफ़ॉल्ट रूप से वेबस्टॉर्म परियोजना की जड़ में वेबपैक कॉन्फ़िगरेशन फ़ाइल का विश्लेषण करेगा, लेकिन आप वरीयताएँ में किसी अन्य फ़ाइल का चयन कर सकते हैं। भाषा और रूपरेखा | JavaScript | Webpack" blog.jetbrains.com / वेबस्टॉर्म / 2017/06 /…

— रॉलर

Answer 2

मैं इस तरह webpack के भीतर WebStorm 2017.2 के लिए उपनाम सेट करने में कामयाब रहा:

Comments

यह काम करता हैं। फ़ाइल में मॉड्यूल.एक्सपोर्ट्स = {रिज़ॉल्यूशन: {alias: {'@utils': path.resolve (__ dirname, '../utils/')}}} शामिल होना चाहिए। इसके अलावा मुझे परिवर्तनों को लागू करने के लिए WebStorm को पुनः आरंभ करना पड़ा।

— अलेक्जेंडर

धन्यवाद! इसने मुझे PhpStorm 2019.1 में मदद की

— Илья pеленько

हमें इस उत्तर को सर्वश्रेष्ठ उत्तर के रूप में चिह्नित करना चाहिए। धन्यवाद।

— मोईन अलीजादेह

इसने मेरी मदद की

— TomTomSamSam

धन्यवाद! अंत में इस कष्टप्रद समस्या के लिए कुछ समाधान।

— अल्बर्टो पेरेज़

Answer 3

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

Comments

कृपया उन उपयोगकर्ताओं की स्थिति पर विचार करें जो वास्तव में अपने प्रोजेक्ट में वेबपैक का उपयोग नहीं करते हैं, और उन दो फ़ाइलों को स्थापित करना चाहते हैं जो PHPStorm सिखाने के उद्देश्य से उपनामों को हल करने के उद्देश्य से हैं। उन लोगों को यह नहीं पता होगा कि webpack.mix.js फ़ाइल को वास्तव में इस उद्देश्य के लिए काम करने के लिए "..." में क्या जाना चाहिए। विशेष रूप से, अगर मैं बस "..." हटाता हूं, तो mixप्रतीक को आईडीई द्वारा अनसुलझे के रूप में सूचित किया जाता है, जो एक मजबूत संकेत है कि यह वास्तव में काम नहीं करेगा। लापता लेकिन गंभीर रूप से महत्वपूर्ण लाइनें हैं जहां "मिक्स" प्रतीक को किसी तरह की आवश्यकता होती है / आयात किया जाता है। कृपया उन्हें अपने उत्तर में जोड़ें।

— स्ज़ेप्पन होलिज़ेव्स्की

Answer 4

आप कस्टम रास्तों को परिभाषित कर सकते हैं, इसलिए WebStorm / PhpStorm आपके उपनामों को समझ सकते हैं। लेकिन सुनिश्चित करें, वे आपके उपनाम के साथ समान हैं। अपनी रूट डायरेक्टरी में फाइल बनाएं और इसे कुछ इस तरह कहें: webStorm.config.js(कोई भी jsफाइल ठीक होगी)। फिर अपने रास्तों को अंदर कॉन्फ़िगर करें:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm / PhpStorm Systemअपने स्वयं के मॉड्यूल के रूप में पहचान करेगा और इस फाइल को कॉन्फ़िगरेशन के रूप में मानेगा ।

Comments

यह वास्तव में काम करता है! वास्तव में रोलअप + स्वेल्ट पर प्रोजेक्ट के साथ मेरी मदद की!

— joycollector

धन्यवाद। यह काम करता हैं। प्रश्न: क्या आप इस फाइल के लिए उपलब्ध पूर्ण विकल्पों के लिए कोई दस्तावेज जानते हैं?

— Mojtaba Hn

Answer 5

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

WS2017.2 के अनुसार यह स्वचालित रूप से किया जाएगा । जानकारी यहाँ है ।

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

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

Comments

यह तब तक काम करता है जब तक कि वेबपैक उपनाम का उपयोग नहीं किया जाता है। मैं @अपने srcफ़ोल्डर के लिए एक उपनाम के रूप में उपयोग कर रहा हूं , लेकिन मेरे कॉन्फ़िगरेशन को वेबस्टॉर्म इंगित करने के बाद भी, यह अभी भी मेरे आयात को सही ढंग से हल नहीं करेगा। हालाँकि, जब मैंने srcफ़ोल्डर को संसाधन रूट के रूप में चिह्नित किया, तो यह उम्मीद के मुताबिक काम किया। अच्छा होगा यदि वेबस्टॉर्म एलियासेस को संभाल सकता है, लेकिन कोई बड़ी बात नहीं है।

— dericcain

तुम इतनी तरह एक उपनाम के लिए एक प्रतीक का उपयोग कर रहे हैं: '@': '../src')। इसके अलावा, क्या आप अपने webpack config, या कई के लिए एक फ़ाइल का उपयोग कर रहे हैं? सोच रहा था कि क्या अलग है। धन्यवाद!

— dericcain

मेरा एक उदाहरण है '@': path.resolve(__dirname, '../src/components')। मैं कई फ़ाइलों, webpack.base.conf.jsफिर devऔर prodसंस्करणों का उपयोग करता हूं । वे बदले में index.js, dev.env.jsऔर के साथ एक कॉन्फ़िगर फ़ोल्डर को कॉल करते हैं prod.env.js। मैं webpack.dev.conf.jsफ़ाइल को देखने के लिए अपने वेबस्टॉर्म को इंगित करता हूं ।

— वेबनोब

मेरा सेटअप बहुत समान है (vue-webpack-pwa) और इसे .dev.confचाल को इंगित करने के लिए । इशारा करना .base.confकाम नहीं कर रहा था। अच्छा निर्णय!

— dericcain

मुझे लगता है कि इसे खोलने के लिए एक मुद्दे की आवश्यकता हो सकती है। मैं यह पुष्टि कर सकता हूं कि यह काम करता है लेकिन अक्सर मैं इसे खोलूंगा और सभी वेबपैक उपनाम अनसुलझे हैं। मैं एक "अमान्य कैश और पुनः आरंभ" करता

— हूं

Answer 6

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

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

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

Comments

यह बेहतर उत्तर है। सापेक्ष पथ कष्टप्रद होते हैं, लेकिन उपयोगी एलईई कार्यक्षमता को खोने के लिए पथ उपनाम की सुविधा के लायक नहीं है।

— thewoolleyman

Answer 7

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

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

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

Answer 8

संघर्ष करने वाले किसी भी व्यक्ति के लिए: path.resolve () को "__dirname" के साथ बुलाया जाना चाहिए ताकि आइडिया (वेबस्मॉर्म) के लिए पहला तर्क सही तरीके से पथ को हल करने में सक्षम हो।

आइडिया (वेबस्मार्ट) के लिए काम करेंगे:

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

आइडिया (वेबस्मार्ट) के लिए काम नहीं करेगा (जबकि अभी भी वैध वेबपैक उर्फ ​​है):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}

Comments

आपको @someAliasसही तरीके से पहचानने के लिए वेबस्टॉर्म कैसे मिलता है?

— डेव जोहान्स

आपने किस फ़ाइल को अन्य नाम से परिभाषित किया है? किस फाइल में?

— डैनियल

Answer 9

वेबस्टॉर्म वेबपैक नहीं पढ़ सकता है। यदि module.exportsकोई फ़ंक्शन वापस आता है। उदाहरण के लिए

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

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

Answer 10

jsconfig.jsअपने प्रोजेक्ट रूट पर जोड़ें

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}