c-wasm-loader

Webpack loader that allows you to import C/C++ files as WebAssembly. This project is in very early development stage, and you're very welcome to contribute or file tickets, as well as it's not released yet, so api changes every day, publish process is not consistent, so some npm versions are broken.

Install with npm:

npm install --save-dev c-wasm-loader

Install with yarn:

yarn add c-wasm-loader --dev

This package automatically installs portable emsdk, so you should have cmake only available.

Name	Type	Default	Description
`name`	`{String\|Function}`	`[hash].[ext]`	Configure a custom filename template for your file
`regExp`	`{RegExp}`	`'undefined'`	Let you extract some parts of the file path to reuse them in the `name` property
`outputPath`	`{String\|Function}`	`'undefined'`	Configure a custom `output` path for your file
`useRelativePath`	`{Boolean}`	`false`	Should be `true` if you wish to generate a `context` relative URL for each file
`limit`	`{Number\|String}`	`undefined`	Byte limit to inline compiled files as Data URL
`std`	`{String}`	undefined	Choose one of ISO C++ standards (C++98 / C++03, C++11, and C++14)
`includePaths`	`{Array}`	undefined
`bind`	`{Boolean}`	`false`
`optimizationLevel`	`{Number}`	`undefined`	Optimization level for emscripten compiler
`debugLevel`	`{Number}`	`undefined`	Debug level for emscripten compiler

`name`

You can configure a custom filename template for your file using the query parameter name.

`limit`

If the file is greater than the limit (in bytes) the file-loader is used by default and all query parameters are passed to it.

The limit can be specified via loader options and defaults to no limit.

`optimizationLevel`

Code is optimized by specifying optimization flags when running emcc. The levels include: 0 (no optimization), 1, 2, s, z, 3.

Emcc strips out most of the debug information from optimized builds by default. Optimisation levels 0 and above remove LLVM debug information, and also disable runtime ASSERTIONS checks. From optimization level -02 the code is minified by the Closure Compiler and becomes virtually unreadable.

`debugLevel`

Can be used to preserve debug information in the compiled output. By default, this option preserves white-space, function names and variable names.

The flag can also be specified with one of five levels: 0, 1, 2, 3, 4. Each level builds on the last to provide progressively more debug information in the compiled output.

If set to 4 provides the most debug information — it generates source maps that allow you to view and debug the C/C++ source code in your browser’s debugger on Firefox, Chrome or Safari!

hello.c

#include <emscripten/emscripten.h>

extern "C" {
  int main(int argc, char ** argv) {
    printf("Hello\n");
  }

  int EMSCRIPTEN_KEEPALIVE world() {
    printf("World\n");
  }
}

hello.js

import hello from './hello.c';

hello().then((module) => {
  module._world();
});

webpack.config.js

module.exports = {
  externals: {
    fs: true
  },
  module: {
    rules: [
      {
        test: /\.(c|cpp)$/,
        use: {
          loader: 'c-wasm-loader',
          options: {
            outputPath: 'wasm',
            name: '[name]-[hash].[ext]'
          }
        }
      }
    ]
  }
}

Package Rankings

Top 22.06% on Npmjs.org

Badges

Extracted from project README