टाइपस्क्रिप्ट कंपाइलर नहीं होने पर वेबपैक मॉड्यूल को खोजने में विफल क्यों होता है?

Question

मैं अपने टाइपस्क्रिप्ट अनुप्रयोगों में Fuse का उपयोग करने का प्रयास कर रहा हूं। मैं import * as fuselib from 'fuse.js'; के साथ मॉड्यूल टाइपिंग आयात कर रहा हूं। यह tsc के साथ ठीक संकलित करता है। जब मैं webpack --config config/webpack.prod.js --progress --profile --bail का उपयोग कर प्रोजेक्ट का निर्माण करता हूं तो समस्या मैं चल रहा हूं।

मुझे त्रुटि Cannot find module 'fuse.js' प्राप्त होती है। Fuse टाइपिंग here मिल सकती है। मेरे संकलित जेएस को देखते हुए, मुझे fuse.js शब्द नहीं मिल रहा है, इसलिए मुझे लगता है कि वेबपैक नाम को उलझ रहा है। मैंने UglifyJsPlugin में कीवर्ड fuse.js को अनदेखा करने का प्रयास किया, लेकिन इससे मदद नहीं मिली।

मेरा वेबपैक कॉन्फ़िगरेशन काफी मानक है।

webpack.prod.js

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
     path: helpers.root('dist'), 
     publicPath: '/', 
     filename: '[name].[hash].js', 
     chunkFilename: '[id].[hash].chunk.js' 
    }, 

    htmlLoader: { 
     minimize: false // workaround for ng2 
    }, 

    plugins: [ 
     new webpack.NoErrorsPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
      mangle: { 
       keep_fnames: true, 
       except: ['fuse.js'] 
      } 
     }), 
      new ExtractTextPlugin('[name].[hash].css'), 
      new webpack.DefinePlugin({ 
       'process.env': { 
        'ENV': JSON.stringify(ENV) 
       } 
      }) 
    ] 
}); 

webpack.common.js

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts' 
    }, 

    resolve: { 
     extensions: ['', '.js', '.ts', '.tsx'], 
     modulesDirectories: ['src', 'node_modules'] 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader'] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html' 
     }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file?name=assets/[name].[hash].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
      }, 
       { 
        test: /\.css$/, 
        include: helpers.root('src', 'app'), 
        loader: 'raw' 
       } 
     ] 
    }, 

    plugins: [ 
     // for materialize-css 
     new webpack.ProvidePlugin({ 
      "window.jQuery": "jquery", 
      "window._": "lodash", 
      _: "lodash" 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
     }), 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
    ] 
}; 

मैं आदेश बनाने के लिए Webpack मॉड्यूल fuse.js देखने में क्या याद आ रही है?

Answer 1

ठीक है, यहाँ क्या हो रहा है और क्यों है।

सबसे पहले, Fuze/index.d.ts खुद को वैश्विक और एक परिवेश बाहरी मॉड्यूल के रूप में घोषित करने का प्रयास करता है लेकिन ये दोनों गलत तरीके से करते हैं। यह दुरुपयोग करता है, जैसे कि जिसने आपकी त्रुटि को लगभग अपरिहार्य बना दिया।

इसमें एक मॉड्यूल घोषणा है जिसमें कक्षा घोषणा शामिल है, संभावित रूप से मॉड्यूल के आकार का वर्णन करने के इरादे से, लेकिन वर्ग निर्यात नहीं किया जाता है।

declare module 'fuse.js' { 
    class Fuze // missing one of: export, export =, export default 
} 

इसका मतलब यह है कि मैं मॉड्यूल सही ढंग से आयात नहीं कर सकते और वास्तव में एक प्रकार की त्रुटि जब यह से कोई मान और/या प्रकार आयात करने की कोशिश होती है।

इसके अलावा Fuse/index.d.ts में नीचे यह वाणी अपनी वैश्विक

declare const Fuse; 

मुमकिन है, सम्मेलनों पर और वास्तविक जावास्क्रिप्ट टिप्पणी पढ़ने आधारित, यह क्या मॉड्यूल से निर्यात किया जाता है के रूप में ही आकार के लिए है। दुर्भाग्य से, यह टाइप any जो न तो प्रयास किया मॉड्यूल के रूप में एक ही प्रकार है, क्योंकि यह मान्य नहीं है, और न ही वर्ग Fuse जो अंदर फंस गया है के प्रकार के मॉड्यूल कहा लेकिन निर्यात नहीं किया ...

तो क्यों त्रुटि?आपके पास शायद आपके प्रोग्राम में निम्न में से कोई एक है: आयात 'फ्यूज'; आयात 'फ्यूज' से फ्यूज; आयात * फ्यूज के रूप में 'फ्यूज';

तरह

const myFuse = new Fuse(); 

यह Fuse के कुछ उपयोग के बाद फ्यूज fuse के क्रम प्रतिनिधित्व के लिए एक आयात, टाइपप्रति द्वारा उत्सर्जित होना, ताकि आप मॉड्यूल से आयात मूल्य का उपयोग कर सकते कारण होगा।

समस्या को ठीक करने के लिए, आप वैश्विक const Fuse का उपयोग कर सकते हैं और इसे कहीं भी आयात नहीं कर सकते हैं। दुर्भाग्य से यह इरादा नहीं है। लेखक लगभग निश्चित रूप से Fuze/index.d.ts में निम्नलिखित सामग्री है का मतलब:

export = Fuse; 

export as namespace Fuse; 

declare class Fuse { 
    constructor(list: any[], options?: Fuse.FuseOptions) 
    search<T>(pattern: string): T[]; 
    search(pattern: string): any[]; 
} 

declare namespace Fuse { 
    export interface FuseOptions { 
     id?: string; 
     caseSensitive?: boolean; 
     include?: string[]; 
     shouldSort?: boolean; 
     searchFn?: any; 
     sortFn?: (a: { score: number }, b: { score: number }) => number; 
     getFn?: (obj: any, path: string) => any; 
     keys?: string[] | { name: string; weight: number }[]; 
     verbose?: boolean; 
     tokenize?: boolean; 
     tokenSeparator?: RegExp; 
     matchAllTokens?: boolean; 
     location?: number; 
     distance?: number; 
     threshold?: number; 
     maxPatternLength?: number; 
     minMatchCharLength?: number; 
     findAllMatches?: boolean; 
    } 
} 

जो एक वर्ग है जो या तो विश्व स्तर पर उपलब्ध है, ES मॉड्यूल का उपयोग नहीं कर उन लोगों के लिए वाणी, या जो कर रहे हैं के लिए एक आयात के माध्यम से। लेखक द्वारा टाइप किए गए टाइपिंग अनुभव को प्राप्त करने के लिए आप उपर्युक्त यूएमडी शैली घोषणा का उपयोग कर सकते हैं। लाइब्रेरी के साथ बंडल किया गया कोई भी प्रकार की जानकारी प्रदान नहीं करता है और वास्तव में उपयोग किए जाने पर त्रुटियों में परिणाम देता है।

पर विचार करें ताकि फिक्स के साथ रखरखाव को पुल अनुरोध भेज दिया जा सके।

प्रयोग:

आप निम्न तरीकों से इस घोषणा का उपयोग कर सकते हैं:

CommonJS टाइपप्रति शैली

import * as Fuse from 'fuse.js'; 

const myFuseOptions: Fuse.FuseOptions = { 
    caseSensitive: false 
}; 
const myFuse = new Fuse([], myFuseOptions); 

विरासत CommonJS शैली

import Fuse = require('fuse.js'); 

const myFuseOptions: Fuse.FuseOptions = { 
    caseSensitive: false 
}; 
const myFuse = new Fuse([], myFuseOptions); 

SystemJS साथ या यदि कोलाहल के माध्यम से पाइपिंग CommonJS इंटरॉप शैली

(जब "module": "system" या "allowSyntheticDefaltImportsTrue" का प्रयोग करके) के साथ ES।

import Fuse from 'fuse.js'; 

const myFuseOptions: Fuse.FuseOptions = { 
    caseSensitive: false 
}; 
const myFuse = new Fuse([], myFuseOptions); 

Answer 2

यह चाल वैश्विक चर Fuse तक पहुंच प्रदान करना है। यह ProvidePlugin

साथ webpack द्वारा किया जाता है webpack प्लगइन्स सरणी के लिए निम्न प्लग-इन जोड़ते:

... 
    new webpack.ProvidePlugin({ 
     "Fuse": "fuse.js" 
    }) 
    ...