Question

我正在尝试使用npm软件包image-focus来聚焦我的一些图像（https://www.npmjs.com/package/image-focus）。

但是我无法正常工作。我通过yarn add image-focus安装了它；然后将其添加到我的image-controller.ts：

import {FocusedImage} from "image-focus";

export class ImageController {
imageSelectorString = '.focused-image';

focusImage() {
    let image = document.querySelector(this.imageSelectorString) as HTMLImageElement;
    const focusedImage = new FocusedImage(image);
  }
}

然后在我的main.js中，我这样做了：

let ic = new ImageController();
ic.focusImage();

但是，重新加载网站后，我的浏览器中出现了JS-异常：

main.min.js:1 Uncaught ReferenceError: require is not defined
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at main.min.js:1
at main.min.js:1

浏览器在控制台中高亮显示此错误：

function(e, t) {
    e.exports = require("image-focus")
}

这是我的webpack.config.js：

const nodeExternals = require('webpack-node-externals');
const path = require('path');
const devMode = true;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    entry:
    [
        './src/index.ts',
        './scss/main.scss'
    ],

externals: {
    'typescript-require': "require('typescript-require')",
    'image-focus': "require('image-focus')",
},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
        ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
],
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].css',
                        outputPath: 'css/'
                    }
                },
                {
                    loader: 'extract-loader'
                },
                {
                    loader: 'css-loader',
                },
                {
                    loader: 'postcss-loader'
                },
                {
                    loader: 'sass-loader',
                }
            ]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ],
        },
        {
            test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: '[name].[ext]'
            }
        }
    ]
},
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
},

output: {
    filename: "main.min.js",
    path: path.resolve(__dirname, 'static_root')
},
};

有人知道如何解决此问题吗？帮助将不胜感激。

问候问候relrelektrischemoench

未定义webpack图像焦点无法正常工作

0 个答案: