无法使用 webpack 加载 Node 原生插件 [英] Cannot load Node native addons with webpack

问题描述

虽然我在示例代码中使用了 vue-cli 来生成 webpack 配置，但没有什么是特定于 vue 的.

Although I am using vue-cli in the example code to generate a webpack config, nothing is specific to vue.

我像这样创建示例应用程序:

I create the example app like this:

vue init webpack webpack_modules_example

生成的webpack.base.conf:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'ad-block': 'ad-block/build/Release/ad-block.node',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
    ]
  },
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

我想包含这个库，所以我这样做:

I want to include this library, so I do this:

npm install --save ad-block

并在代码 (App.vue) 上添加:

And on the code (App.vue) I add this:

<script>
...
  const {AdBlockClient, FilterOptions} = require('ad-block')
...

因为它是一个原生模块，所以我需要为 webpack 安装一些加载器(尝试了几个):

Because it's a native module, I need to install some loader for webpack (tried several):

npm install native-ext-loader --save-dev

将加载器添加到 webpack 配置中:

Add the loader to the webpack config:

  {
    test: /\.node$/,
    loader: "native-ext-loader"
  },

并在 webpack 配置中创建一个别名:

And create an alias in the webpack config too:

alias: {
      ...
      'ad-block': 'ad-block/build/Release/ad-block.node',
      ...
    }

但是当我运行 npm run dev 并转到 http://localhost:8080/我在控制台中看到此错误:

But when I run npm run dev and go to http://localhost:8080/ I see this error in the console:

未捕获的错误:无法打开/ad-block.node:类型错误:无法读取未定义的属性dlopen"

Uncaught Error: Cannot open /ad-block.node: TypeError: Cannot read property 'dlopen' of undefined

在 Object.eval (ad-block.node?9538:1)

at Object.eval (ad-block.node?9538:1)

在 eval (ad-block.node:2)

at eval (ad-block.node:2)

在 Object../node_modules/ad-block/build/Release/ad-block.node (app.js:733)

at Object../node_modules/ad-block/build/Release/ad-block.node (app.js:733)

在 webpack_require (app.js:679)

at webpack_require (app.js:679)

在 fn (app.js:89)

at fn (app.js:89)

在 eval (App.vue?26cd:9)

at eval (App.vue?26cd:9)

在 Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:757)

at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:757)

在 webpack_require (app.js:679)

at webpack_require (app.js:679)

在 fn (app.js:89)

at fn (app.js:89)

在 eval (App.vue?a8e9:1)

at eval (App.vue?a8e9:1)

如果我在没有 webpack 的情况下使用它，它可以工作.不知道我错过了什么！

If I use this without webpack, it works. Not sure what am I missing!

推荐答案

NodeJS 是一个服务器端编程环境，因此支持编译为在运行 Node 服务的同一主机上运行的本机"附加模块.

NodeJS is a server-side programming environment and as such, supports "native" add-on modules compiled to run on the same host that runs your Node service.

虽然 Node 是使用 JavaScript 编程的，但它不是浏览器 JavaScript，因此不能期望在浏览器中运行原生广告.

While Node is programmed using JavaScript, it is not browser JavaScript and so native ad-ons cannot be expected to run in the browser.

有关详细信息，请参阅 Node C++ 插件.

See Node C++ Addons for more information.

这篇关于无法使用 webpack 加载 Node 原生插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！