6

我正在尝试在我的 TypeScript 应用程序中使用Fuse 。我正在使用import * as fuselib from 'fuse.js';. 这与tsc. 我遇到的问题是当我使用webpack --config config/webpack.prod.js --progress --profile --bail.

我收到错误Cannot find module 'fuse.js'。Fuse类型可以在这里找到。查看我编译的 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？

4

2 回答 2

7

更新

我根据这个答案为图书管理员问题写了新的声明。它应该与库附带的最新版本一起正常工作。

回答

好的，这就是正在发生的事情以及原因。

首先，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是被困在所述模块内但未导出的类的类型......

那么为什么会出错呢？您的程序中的某处可能有以下内容之一：

import 'fuse.js';

import Fuse from 'fuse.js';

import * as Fuse from 'fuse.js';

其次是一些使用Fuselike

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"or时"allowSyntheticDefaltImports"）与 SystemJS、最近的 Webpacks 或通过 Babel 进行管道连接。从 typescript 2.7 开始，您还可以使用新--esModuleInterop标志，而无需任何额外的模块工具或转译器。

import Fuse from 'fuse.js';

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

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

于 2016-12-17T03:24:36.633 回答
0

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

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

    ...
    new webpack.ProvidePlugin({
        "Fuse": "fuse.js"
    })
    ...
于 2016-12-15T22:34:45.687 回答