使用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应用程序中使用库而不在交付给浏览器的应用程序中使用时才有效。