Menu
I'm trying to build pty.js for use in node-webkit (i.e. 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.
With a simple app.js and index.html, the app launches with 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"
}
I want to support ES6 and JSX compilation via webpack by bundling app.js into 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>
Bundling app.js:
npm install -g webpack
webpack app.js bundle.js --target="node-webkit" # This fails
But webpack fails with this error:
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
Do I need to use a loader when requireing native binaries (like pty.node)? The webpack documentation says that the "node-webkit" target "supports native node.js modules"; perhaps it doesn't yet support native addons?
852
Webpack allows you to define externals - modules that should not be bundled. When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
Webpack is a static module bundler for JavaScript applications. It takes modules, whether that's a custom file that we created or something that was installed through NPM, and converts these modules to static assets.
While I wasn't able to get webpack working, I was able to get ES6 + JSX working by using 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')
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With