वेबपैक

Question

का उपयोग कर फ़ाइल को प्रतिस्थापित/अलियासिंग करना, मैं अपने प्रोजेक्ट में एक बहुत ही नए तृतीय-पक्ष मॉड्यूल का उपयोग करने की कोशिश कर रहा हूं, जिसे मैंने npm का उपयोग करके इंस्टॉल किया था। मॉड्यूल स्पष्ट रूप से एक ओएस पर एक केस-असंवेदनशील फ़ाइल सिस्टम के साथ विकसित किया गया था, इसलिए इसे injectable.js फ़ाइल की आवश्यकता होती है जबकि वास्तविक फ़ाइल नाम Injectable.js है। यह बंडलिंग प्रक्रिया को तोड़ देता है।

मॉड्यूल के डेवलपर्स इस मुद्दे को जानते हैं। इस बीच, मैं यह पता लगाने की कोशिश कर रहा हूं कि मॉड्यूल का उपयोग कैसे करें। मैं अपनी परियोजना को बंडल करने के लिए वेबपैक का उपयोग कर रहा हूं।

अपने प्रोजेक्ट के संबंधित भाग के वृक्ष संरचना मोटे तौर पर यह है:

├──config 
│  ├──webpack 
│   ├──webpack.js 
│ 
├──src 
│ ├──client 
│  ├──index.js 
│ 
│ 
├──node_modules 
│ ├──the module in question 
│   ├── dist 
│   │   ├── decorators 
│   │   │   ├── providers 
│   │   │      ├── Injectable.js 
│   │   │ 
│   │ ├── index.js 
| 
├──gulpfile.js 

node_modules/the module in question/dist फ़ोल्डर में index.js फ़ाइल प्रदाताओं फ़ोल्डर से फ़ाइल Injectable.js की आवश्यकता होती है, लेकिन आदेश के साथ ऐसा नहीं करता है require('./decorators/providers/injectable');

मैं ./decorators/providers/injectableindex.js में ./decorators/providers/Injectable के साथ उपनाम करना चाहता हूं।

यहाँ मैं अपने webpack.js फ़ाइल में क्या कर रहा हूँ है:

resolve: { 
     alias: { 
      './decorators/providers/injectable': './decorators/providers/Injectable.js', 
     }, 
} 

लेकिन यह अभी भी काम नहीं करता है; मुझे त्रुटि मिल रही है Module not found: Error: Cannot resolve 'file' or 'directory' ./decorators/providers/injectable

क्या आप कृपया सुझाव दे सकते हैं कि वेबपैक के साथ बंडल करते समय एक नोड मॉड्यूल में एक फ़ाइल नाम को कैसे बदलें?

अद्यतन:

यहाँ webpack के कॉन्फ़िग फ़ाइल है:

var path = require('path'); 
var rucksack = require('rucksack-css')({ 
    fallbacks: true, 
    autoprefixer: true 
}); 
var precss = require('precss'); 
var csswring = require('csswring'); 
var webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, '../../'), 
    debug: false, 
    entry: [ 
     './src/client/' 
    ], 
    output: { 
     path: path.join(__dirname, '../../public/assets/js'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel?stage=1' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader!postcss-loader' 
      }, 
      {test: /\.png$/, loader: 'file-loader'}, 
      {test: /\.gif$/, loader: 'file-loader'}, 
      {test: /\.jpe?g$/, loader: 'file-loader'}, 
      {test: /\.eot$/, loader: 'file-loader'}, 
      {test: /\.woff2?$/, loader: 'file-loader'}, 
      {test: /\.ttf$/, loader: 'file-loader'}, 
      {test: /\.svg$/, loader: 'file-loader'} 
     ] 
    }, 
    postcss: function() { 
     return [rucksack, precss, csswring]; 
    }, 
    plugins: [ 
     new webpack.NormalModuleReplacementPlugin(
      /ng-forward\/dist\/decorators\/providers\/injectable\.js/, 
      require.resolve('ng-forward/dist/decorators/providers/Injectable') 
     ) 
    ], 
    resolve: { 
     extensions: ['', '.js'] 
    } 
}; 

Answer 1

उपयोग webpack.NormalModuleReplacementPlugin:

plugins: [ 
    new webpack.NormalModuleReplacementPlugin(
    /ng-forward\/dist\/decorators\/providers\/injectable\.js/, 
    require.resolve('ng-forward/dist/decorators/providers/Injectable') 
), 
],