exntesion: Merge #236, fix extension build process
Use Webpack to build and package Ruffle WASM file in extension
This commit is contained in:
commit
82c366da7b
|
@ -13,31 +13,21 @@ module.exports = (env, argv) => {
|
||||||
console.log(`Building ${mode}...`);
|
console.log(`Building ${mode}...`);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
externals: /^(ruffle_web)$/i,
|
|
||||||
|
|
||||||
entry: path.resolve(__dirname, "js/index.js"),
|
entry: path.resolve(__dirname, "js/index.js"),
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, "build/dist"),
|
path: path.resolve(__dirname, "build/dist"),
|
||||||
filename: "ruffle.js",
|
filename: "ruffle.js",
|
||||||
|
chunkFilename: "core.ruffle.js",
|
||||||
|
jsonpFunction: "RufflePlayerExtensionLoader",
|
||||||
},
|
},
|
||||||
mode: mode,
|
mode: mode,
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.IgnorePlugin({
|
new CleanWebpackPlugin(),
|
||||||
resourceRegExp: /..\/pkg\/ruffle/
|
|
||||||
}),
|
|
||||||
new CleanWebpackPlugin({
|
|
||||||
protectWebpackAssets: false,
|
|
||||||
cleanAfterEveryBuildPatterns: ["*.module.wasm"],
|
|
||||||
}),
|
|
||||||
new WasmPackPlugin({
|
new WasmPackPlugin({
|
||||||
crateDirectory: path.resolve(__dirname, ".."),
|
crateDirectory: path.resolve(__dirname, ".."),
|
||||||
extraArgs: "--target=no-modules",
|
extraArgs: "--out-name=ruffle",
|
||||||
forceMode: mode,
|
forceMode: mode,
|
||||||
}),
|
})
|
||||||
new CopyPlugin([
|
|
||||||
{ from: "../pkg/ruffle_web.js", to: "ruffle_web.js" },
|
|
||||||
{ from: "../pkg/ruffle_web_bg.wasm", to: "ruffle_web_bg.wasm" },
|
|
||||||
])
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,8 +14,8 @@ async function fetch_ruffle() {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
//If runtime_path is defined then we are executing inside the extension
|
//If runtime_path is defined then we are executing inside the extension
|
||||||
//closure and we can manually fetch the inner chunks of Ruffle here.
|
//closure. In that case, we configure our local Webpack instance
|
||||||
is_extension_running = runtime_path !== undefined;
|
__webpack_public_path__ = runtime_path + "dist/";
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//Checking an undefined closure variable usually throws ReferencError,
|
//Checking an undefined closure variable usually throws ReferencError,
|
||||||
//so we need to catch it here and continue onward.
|
//so we need to catch it here and continue onward.
|
||||||
|
@ -25,40 +25,11 @@ async function fetch_ruffle() {
|
||||||
throw e;
|
throw e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (is_extension_running) {
|
|
||||||
//Download Ruffle from the URL the browser gives us.
|
|
||||||
let ruffle_bindings_url = runtime_path + "dist/ruffle_web.js";
|
|
||||||
let ruffle_wasm_url = runtime_path + "dist/ruffle_web_bg.wasm";
|
|
||||||
|
|
||||||
//We load the wasm package early so that both requests are parallelized.
|
//We currently assume that if we are not executing inside the extension,
|
||||||
//This won't be awaited by us at all.
|
//then we can use webpack to get Ruffle.
|
||||||
let ruffle_wasm_request = fetch(ruffle_wasm_url);
|
let ruffle_module = await import("../pkg/ruffle");
|
||||||
|
return ruffle_module.Ruffle;
|
||||||
//One point of admin: `wasm-pack`, in no-modules mode, stores it's bindings
|
|
||||||
//straight in `window`, which we don't want. We grab whatever was in Window
|
|
||||||
//before loading in the module so we can replace what was there.
|
|
||||||
let ruffle_bindings_request = await fetch(ruffle_bindings_url);
|
|
||||||
let ruffle_bindings_src = await ruffle_bindings_request.text();
|
|
||||||
let noconflict_wasm_bindgen = window.wasm_bindgen;
|
|
||||||
(new Function(ruffle_bindings_src))();
|
|
||||||
let ruffle_wasm_bindgen = window.wasm_bindgen;
|
|
||||||
window.wasm_bindgen = noconflict_wasm_bindgen;
|
|
||||||
|
|
||||||
//Next step: Actually initialize our bindings.
|
|
||||||
let ruffle_wasm_response = await ruffle_wasm_request;
|
|
||||||
let ruffle_wasm_data = await ruffle_wasm_response.arrayBuffer();
|
|
||||||
let ruffle_bindings = await ruffle_wasm_bindgen(ruffle_wasm_data).catch(function (e) {
|
|
||||||
console.error(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
return ruffle_wasm_bindgen.Ruffle;
|
|
||||||
} else {
|
|
||||||
//We currently assume that if we are not executing inside the extension,
|
|
||||||
//then we can use webpack to get Ruffle.
|
|
||||||
let ruffle_module = await import("../pkg/ruffle");
|
|
||||||
return ruffle_module.Ruffle;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let last_loaded_ruffle = null;
|
let last_loaded_ruffle = null;
|
||||||
|
|
Loading…
Reference in New Issue