如何在 node-webkit 中使用 webpack 将 node 模块与本机插件捆绑在一起？答案

【问题标题】：How to bundle node modules with native addons using webpack in node-webkit?如何在 node-webkit 中使用 webpack 将 node 模块与本机插件捆绑在一起？
【发布时间】：2015-02-27 20:44:59
【问题描述】：

我正在尝试构建pty.js 以用于node-webkit（即nw.js）v0.8.6：

mkdir testapp && cd testapp
nvm use 0.10.36
npm install -g nw-gyp
npm install pty.js
cd node_modules/pty.js

# Build the native addon for node-webkit v0.8.6:
nw-gyp configure --target=0.8.6 && nw-gyp build

The output ends with gyp info ok.

使用简单的 app.js 和 index.html，应用程序会以 no errors in the JavaScript console 启动：

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

// app.js

var pty = require('pty.js');

var term = pty.spawn('bash', [], {
  name: 'xterm-color',
  cols: 80,
  rows: 30,
  cwd: process.env.HOME,
  env: process.env
});

term.on('data', function(data) {
  console.log(data);
});

term.write('ls\r');
term.resize(100, 40);
term.write('ls /\r');

console.log(term.process);

package.json：

{
    "name": "testapp",
    "main": "index.html"
}

我想通过 webpack 将 app.js 捆绑到 bundle.js 中来支持 ES6 和 JSX 编译：

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="bundle.js"></script>
  </body>
</html>

捆绑app.js：

npm install -g webpack
webpack app.js bundle.js --target="node-webkit"  # This fails

但是 webpack 失败并出现此错误：

Hash: 6c3cd8b4ec249ab8fd05
Version: webpack 1.6.0
Time: 76ms
    Asset   Size  Chunks             Chunk Names
bundle.js  21244       0  [emitted]  main
   [0] ./app.js 311 {0} [built]
    + 10 hidden modules

ERROR in ./~/pty.js/build/Release/pty.node
Module parse failed: /Users/Spencer/Desktop/testapp/node_modules/pty.js/build/Release/pty.node Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/pty.js/lib/pty.js 10:10-46

当requireing 本地二进制文件（如pty.node）时，我是否需要使用加载程序？ webpack documentation 表示 "node-webkit" 目标“支持本机 node.js 模块”；也许它还不支持原生插件？

【问题讨论】：

我没有任何捆绑到 node-webkit 的经验，但你可以试试 node-loader。

标签： node.js node-webkit webpack

【解决方案1】：

虽然我无法让 webpack 工作，但我可以通过使用 require('babel/register') 让 ES6 + JSX 工作：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Hello World!</title>
</head>
<body>
  <main></main>
  <script>
    require('babel/register');
    require('./js/app');
  </script>
</body>
</html>

// ./js/app.js

import React from 'react';

React.render(
  <span>Hello World!</span>,
  document.querySelector('main')
);

【讨论】：