Skip to content

Instantly share code, notes, and snippets.

@carlopi
Last active May 9, 2022 14:54
Show Gist options
  • Save carlopi/f561fe18b054167aa0b6469ac8c6a98b to your computer and use it in GitHub Desktop.
Save carlopi/f561fe18b054167aa0b6469ac8c6a98b to your computer and use it in GitHub Desktop.
WebPack -Cheerp example [to be reviewed]
Take this GIST: https://gist.github.com/carlopi/e06214ac66594d41cdfcbff7581ddd79, compile the files with this command line:
/opt/cheerp/bin/clang++ randomBits.c -o randomBits.js -O3 -cheerp-make-module=es6 -cheerp-pretty-code
Create a folder with the following structure:
webpack.config.js
package.json
src
|-- instatiation.js
|-- randomBits.js
\-- randomBits.wasm
Then:
webpack ./src/instantation.js
generates a main.js + a wasm file in dist/
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"dev": "cross-env APP_ENV=dev webpack --require @babel/register"
},
"devDependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/register": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
},
"babel": {
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"transform-es2015-modules-commonjs"
]
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"babel": "^6.23.0",
"babel-node": "^0.0.1-security"
},
"browser": {
"fs": false
}
}
import instantiateFunction from './cheerp.js'
instantiateFunction().then(module =>
{
console.log("Module has been instantiated!");
window.drawStuff = module.drawRandomPixels;
}
);
const path = require('path');
module.exports = {
entry: './src/instantiation.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment