如何在 node-webkit 中使用 webpack 将节点模块与本机插件捆绑在一起?
How to bundle node modules with native addons using webpack in node-webkit?
我正在尝试构建 pty.js for use in 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 支持 ES6 和 JSX 编译,方法是将 app.js 捆绑到 bundle.js:
<!-- 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
在 require
本地二进制文件(如 pty.node
)时我需要使用加载器吗? webpack documentation 表示 "node-webkit"
目标 "supports native node.js modules";也许它还不支持原生插件?
虽然我无法让 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')
);
我正在尝试构建 pty.js for use in 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 支持 ES6 和 JSX 编译,方法是将 app.js 捆绑到 bundle.js:
<!-- 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
在 require
本地二进制文件(如 pty.node
)时我需要使用加载器吗? webpack documentation 表示 "node-webkit"
目标 "supports native node.js modules";也许它还不支持原生插件?
虽然我无法让 webpack 工作,但我可以通过使用 require('babel/register')
:
<!-- 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')
);