使用webpack使用npm lib的問題

Question

我使用https://github.com/vuejs-templates/webpack-simple創建了一個包含vuejs的webpack項目。 現在，我嘗試在vue應用程序中使用https://www.npmjs.com/package/bravia，並import Bravia from 'bravia'; 。

當運行npm run dev出現如下錯誤：

ERROR in ./~/node-ssdp/lib/index.js
Module not found: Error: Can't resolve 'dgram' in '/Users/xxx/xxx/bravia-remote/node_modules/node-ssdp/lib'
 @ ./~/node-ssdp/lib/index.js 3:12-28
 @ ./~/node-ssdp ^.*index$
 @ ./~/node-ssdp/index.js
 @ ./~/bravia/src/bravia.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

找不到模塊：

• dgram
• 柴
• 西農

我可以在webpack.config.js中解決其中的一些問題：

node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }

如何正確包含該庫？

完整的webpack配置：

module.exports = {
entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ],
    loaders: [
        {
            // "test" is commonly used to match the file extension
            test: /\.jsx$/,

            // "include" is commonly used to match the directories
            include: [
                path.resolve(__dirname, "app/src"),
                path.resolve(__dirname, "app/test")
            ],

            // "exclude" should be used to exclude exceptions
            // try to prefer "include" when possible

            // the "loader"
            loader: "babel-loader" // or "babel" because webpack adds the '-loader' automatically
        }
    ]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
},
devServer: {
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map',
node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
}
}

Answer 1

您很可能無法將此庫集成到您的應用程序中，因為它或它的依賴項依賴於瀏覽器中不可用的Node.js API部分，例如tls和os 。

換句話說，它僅在您在Node.js應用程序中使用庫而不在交付給瀏覽器的應用程序中使用時才有效。