Question

我正在尝试在Electron中创建一个使用React，Webpack 2 Sharp和Electron的应用程序。

我刚刚添加了Sharp（https://github.com/lovell/sharp），Webpack坚决尝试构建Sharp，但我认为不应该（我可能是错的，如果是这样，我将如何加载这些文件？）？

我收到以下标题：

WARNING in ./~/sharp/lib/constructor.js
Module not found: Error: Can't resolve '../vendor/lib/versions.json' in '/Users/andy/Development/image-browser/node_modules/sharp/lib'
@ ./~/sharp/lib/constructor.js 23:15-53
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

WARNING in ./~/sharp/lib/icc/sRGB.icc
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/lib/icc/sRGB.icc Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/sharp/lib ^\.\/.*$
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

WARNING in ./~/sharp/lib/icc/cmyk.icm
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/lib/icc/cmyk.icm Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/sharp/lib ^\.\/.*$
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

ERROR in ./~/sharp/build/Release/sharp.node
Module parse failed: /Users/andy/Development/image-browser/node_modules/sharp/build/Release/sharp.node Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/sharp/lib/constructor.js 8:14-52
@ ./~/sharp/lib/index.js
@ ./app/src/utils/getImage.js
@ ./app/src/components/Images/image.js
@ ./app/src/components/Images/index.js
@ ./app/src/App.js
@ ./app/src/entry.js

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

    watch: true,

    target: 'electron',

    entry: './app/src/entry.js',

    devtool: 'source-map',

    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env',
                            'react'
                        ]
                    }
                }
            },
            // {
            //     test: /\.node$/,
            //     use: {
            //         loader: 'node-loader'
            //     }
            // },
            {
                test: /\.(sass|scss)$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                include: /\/app\/src/,
                // exclude: /(node_modules)/,
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ]
}

我的babel配置（从package.json中提取）：

"babel": {
    "retainLines": true,
    "presets": [
        [
            "env",
            {
            "targets": {
                "electron": 1.6,
                "node": 7.9
            },
                "modules": false,
                "debug": true
            }
        ],
        "es2015",
        "es2016",
        "es2017"
    ]
},

有什么想法吗？

Answer 1

我已成功完成此工作，以下是我在此Github问题中添加的评论的镜像：https://github.com/lovell/sharp/issues/794

关键是找到这篇文章：http://jlongster.com/Backend-Apps-with-Webpack--Part-I#p28（感谢@jlongster）。

我的webpack.config.js如下所示：

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path');
const fs = require('fs');

// FROM: http://jlongster.com/Backend-Apps-with-Webpack--Part-I#p28
const nodeModules = {};
fs.readdirSync('node_modules')
    .filter(item => ['.bin'].indexOf(item) === -1)  // exclude the .bin folder
    .forEach((mod) => {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    watch: true,
    target: 'electron',
    entry: ['babel-polyfill', './app/src/entry.js'],
    devtool: 'source-map',
    externals: nodeModules,
    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'app/src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'env',
                            'react'
                        ]
                    }
                }
            },
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, 'app/src'),
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                include: path.resolve(__dirname, 'app/src'),
                use: {
                    loader: 'file-loader',
                    query: {
                        name: '[name].[ext]?[hash]'
                    }
                }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ]
}

<强> TL; DR

使用此命令获取所有节点模块的列表：

const nodeModules = {};
fs.readdirSync('node_modules')
    .filter(item => ['.bin'].indexOf(item) === -1 )  // exclude the .bin folder
    .forEach((mod) => {
        nodeModules[mod] = 'commonjs ' + mod;
    });

并将nodeModules变量传递给Webpack的外部键：

externals: nodeModules,

或者，您可以使用Ignore Module Webpack插件之一，但我自己没有尝试过。

Answer 2

我遇到了同样的问题并且在安装了node-loader时运气不错，并在package.json

中设置了以下内容

{
  test: /\.node$/,
  use: 'node-loader'
},

我解决了ERROR in ./~/sharp/build/Release/sharp.node。但我不确定如果不解决其他三个警告也会导致任何问题。但至少现在我的Electron应用程序可以启动了。

Webpack 2拒绝忽略node_modules文件夹中的lovell / sharp

2 个答案: