TypeScript 컴파일러가 없을 때 Webpack이 모듈을 찾지 못하는 이유는 무엇입니까?

Question

내 TypeScript 응용 프로그램에서 Fuse을 사용하려고합니다. import * as fuselib from 'fuse.js';으로 모듈 입력을 가져옵니다. 이것은 tsc으로 잘 컴파일됩니다. 내가 실행중인 문제는 webpack --config config/webpack.prod.js --progress --profile --bail을 사용하여 프로젝트를 빌드 할 때입니다.

오류 Cannot find module 'fuse.js'가 나타납니다. Fuse 입력은 here입니다. 컴파일 된 JS를 보면 단어 fuse.js을 찾을 수 없으므로 Webpack이 이름을 잘못 입력하고있는 것 같습니다. UglifyJsPlugin에있는 키워드 fuse.js을 무시해 보았지만 도움이되지 않았습니다.

내 Webpack 구성은 꽤 표준입니다.

내가 웹팩 모듈 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' 
     }) 
    ] 
}; 

?

Answer 1

OK, 여기에 일어나고있는 이유는 무엇인가.

첫째, 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 유형은 없습니다.

왜 그렇습니까? 오류?프로그램의 어딘가에 다음 중 하나가있을 수 있습니다 : import 'fuse'; 가져 오기 '퓨즈'에서 퓨즈; 가져 오기 * '퓨즈'에서 퓨즈로;

는 모듈에서 가져온 값을 사용할 수 있도록 퓨즈 fuse의 런타임 표현에 대한 가져 오기, 타이프 라이터에 의해 방출되는 원인이됩니다

const myFuse = new Fuse(); 

이 같은 Fuse의 일부를 사용 하였다.

문제를 해결하려면 const Fuse을 사용하고 어디에도 가져올 수 없습니다. 불행히도 그것은 의도 한 것이 아닙니다. 저자는 거의 확실 Fuze/index.d.ts에 다음과 같은 내용을 가지고 의미 : ES 모듈을 사용하지 않는 사람들을 위해, 전 세계적으로 중 사용할 수있는 클래스를 선언

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; 
    } 
} 

, 또는 사람들에 대한 가져 오기를 통해. 위의 UMD 스타일 선언을 사용하여 작성자가 의도 한 타이핑 경험을 얻을 수 있습니다. 라이브러리에 번들로 제공된 유형 정보는 유형 정보를 제공하지 않으며 실제로 사용될 때 오류가 발생합니다.

수정 도구를 사용하여 관리자에게 요청을 보냅니다.

사용 :

이

다음과 같은 방법으로이 선언을 사용할 수 있습니다

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

와 웹팩에 의해 수행됩니다

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