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正在破坏这个名字。我尝试忽略fuse.js中的关键字UglifyJsPlugin，但这没有帮助。

我的Webpack配置非常标准。

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;

据推测，基于约定并阅读实际JavaScript中的注释，这意味着具有与从模块导出的内容相同的形状。不幸的是，它的类型any与尝试模块的类型不同，因为它无效，也没有被捕获在所述模块中但未导出的类Fuse的类型。 ..

那么为什么会出错呢？您可能在程序中的某处具有以下某个位置：进口'保险丝'; 从'fuse'导入保险丝; 从'fuse'导入*作为Fuse;

然后使用Fuse喜欢

const myFuse = new Fuse();

这将导致TypeScript发出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;
    }
}

其中声明了一个全局可用的类，对于那些不使用模块的类，或者通过导入为那些类。您可以使用上面的UMD样式声明来获得作者想要的打字体验。与库捆绑的那个不提供类型信息，实际上在使用时会导致错误。

考虑使用修复程序向维护者发送拉取请求。

<强>用法：

您可以通过以下方式使用此声明：

CommonJS，AMD或UMD风格

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

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

使用CommonJS互操作风格的ES

（当使用"module": "system"或"allowSyntheticDefaltImports"）与SystemJS，最近的Webpack，或通过Babel管道时。从typescript 2.7开始，你也可以使用新的--esModuleInterop标志，而无需任何额外的模块工具或转换器。

import Fuse from 'fuse.js';

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

从typecript 2.7开始，es模块互操作现在可以直接使用该语言。这意味着您不需要使用Babel或系统JS或webpack来编写正确的导入。

Answer 2

诀窍是提供对全局变量Fuse的访问。它由webpack使用ProvidePlugin

完成

将以下插件添加到webpack插件数组中：

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

为什么当TypeScript编译器没有找到模块时，Webpack无法找到模块？

2 个答案: