liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

exntesion: Merge #236, fix extension build process 

Use Webpack to build and package Ruffle WASM file in extension
This commit is contained in:
Mike Welsh 2020-01-13 10:30:56 -08:00 committed by GitHub
parent 001a931afe 51023145c8
commit 82c366da7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/extension/webpack.config.js
View File

@ -13,31 +13,21 @@ module.exports = (env, argv) => {
console.log(`Building ${mode}...`);
return {
externals: /^(ruffle_web)$/i,
entry: path.resolve(__dirname, "js/index.js"),
output: {
path: path.resolve(__dirname, "build/dist"),
filename: "ruffle.js",
chunkFilename: "core.ruffle.js",
jsonpFunction: "RufflePlayerExtensionLoader",
},
mode: mode,
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /..\/pkg\/ruffle/
}),
new CleanWebpackPlugin({
protectWebpackAssets: false,
cleanAfterEveryBuildPatterns: ["*.module.wasm"],
}),
new CleanWebpackPlugin(),
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, ".."),
extraArgs: "--target=no-modules",
extraArgs: "--out-name=ruffle",
forceMode: mode,
}),
new CopyPlugin([
{ from: "../pkg/ruffle_web.js", to: "ruffle_web.js" },
{ from: "../pkg/ruffle_web_bg.wasm", to: "ruffle_web_bg.wasm" },
])
})
]
}
};

33
web/js-src/load-ruffle.js
View File

@ -14,8 +14,8 @@ async function fetch_ruffle() {
try {
//If runtime_path is defined then we are executing inside the extension
//closure and we can manually fetch the inner chunks of Ruffle here.
is_extension_running = runtime_path !== undefined;
//closure. In that case, we configure our local Webpack instance
__webpack_public_path__ = runtime_path + "dist/";
} catch (e) {
//Checking an undefined closure variable usually throws ReferencError,
//so we need to catch it here and continue onward.
@ -26,39 +26,10 @@ async function fetch_ruffle() {
}
}
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.
//This won't be awaited by us at all.
let ruffle_wasm_request = fetch(ruffle_wasm_url);
//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;