From afe02f585eaba2fcc7f880f293b32b2adf3e047e Mon Sep 17 00:00:00 2001 From: "Austin.Duan" Date: Tue, 2 Aug 2022 14:21:22 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-12093=20feat:=20=E6=8B=93=E5=B1=95?= =?UTF-8?q?=E4=B8=8Bfui-worker=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bin/cli/worker/template/main_thread.helper.t | 4 ++- .../worker-loader.js | 29 ++++++++++++------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/bin/cli/worker/template/main_thread.helper.t b/bin/cli/worker/template/main_thread.helper.t index af02e5192..c0e1c6b2b 100644 --- a/bin/cli/worker/template/main_thread.helper.t +++ b/bin/cli/worker/template/main_thread.helper.t @@ -1,6 +1,7 @@ import { ${WorkerName}MainThreadWorker } from './main_thread/${workerName}_main_thread'; // 不需要一起打包的话则不需要引入这行 -import { workerUrl } from 'fui-worker!./worker_thread/${workerName}_worker_thread'; +// 根据实际需求传入inline属性，true -> blob url，false -> servicePath +import { workerUrl } from 'fui-worker?inline=true!./worker_thread/${workerName}_worker_thread'; export class ${WorkerName}WorkerHelper { private worker: ${WorkerName}MainThreadWorker; @@ -23,6 +24,7 @@ export class ${WorkerName}WorkerHelper { /** * 格式化worker url，比如补充一些环境信息到参数里 + * 通过 #hash 传入blob url或 ?params 传入servicePath * @param url worker url */ private urlFormatter(url: string) { diff --git a/plugins/webpack-fui-worker-plugin/worker-loader.js b/plugins/webpack-fui-worker-plugin/worker-loader.js index 9affe81f4..fd91bb829 100644 --- a/plugins/webpack-fui-worker-plugin/worker-loader.js +++ b/plugins/webpack-fui-worker-plugin/worker-loader.js @@ -43,7 +43,7 @@ function loader() { const entryFileName = `${FileNamePrefix}index`; // 获取传递给 loader 的 options - loaderUtils.getOptions(this) || {}; + const options = loaderUtils.getOptions(this) || {}; // 创建 childCompiler, 用于实现 worker 构建为独立 js 资源 const childCompiler = this._compilation.createChildCompiler(WorkerLoaderName, { @@ -92,15 +92,24 @@ function loader() { return callback(error); } - return callback( - null, - // 插入代码的转译和压缩由主构建配置的 babel/ts loader 处理, 不需要 worker-worker 来处理 - // 添加 @ts-nocheck 避免 ts-check 报错 - `// @ts-nocheck - const servicePath = __webpack_public_path__ + ${JSON.stringify(entry)}; - export const workerUrl = servicePath; - ` - ); + // 支持blob url形式 + return options.inline + ? callback( + null, + // 插入代码的转译和压缩由主构建配置的 babel/ts loader 处理, 不需要 worker-worker 来处理 + // 添加 @ts-nocheck 避免 ts-check 报错 + `// @ts-nocheck + const blob = new Blob([${JSON.stringify(compilation.assets[entry].source())}]); + export const workerUrl = window.URL.createObjectURL(blob); + ` + ) + : callback( + null, + `// @ts-nocheck + const servicePath = __webpack_public_path__ + ${JSON.stringify(entry)}; + export const workerUrl = servicePath; + ` + ) }); return; From e38e010e32026a159a2457700c44d007bd556b90 Mon Sep 17 00:00:00 2001 From: "Austin.Duan" Date: Wed, 3 Aug 2022 18:38:55 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-12093=20feat:=20worker=E6=8F=92?= =?UTF-8?q?=E4=BB=B6options=E5=90=8C=E6=AD=A5=E5=88=B0loader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bin/cli/worker/template/main_thread.helper.t | 7 ++-- plugins/webpack-fui-worker-plugin/index.js | 34 +++++++++++++++++++ .../worker-loader.js | 2 +- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/bin/cli/worker/template/main_thread.helper.t b/bin/cli/worker/template/main_thread.helper.t index c0e1c6b2b..19ac36016 100644 --- a/bin/cli/worker/template/main_thread.helper.t +++ b/bin/cli/worker/template/main_thread.helper.t @@ -1,7 +1,8 @@ import { ${WorkerName}MainThreadWorker } from './main_thread/${workerName}_main_thread'; // 不需要一起打包的话则不需要引入这行 -// 根据实际需求传入inline属性，true -> blob url，false -> servicePath -import { workerUrl } from 'fui-worker?inline=true!./worker_thread/${workerName}_worker_thread'; +// FuiWorkerPlugin中的属性会同步到fui-worker中，同时支持loader行内传入属性 +// 根据实际需求传入inline，返回格式 true -> blob url，false -> servicePath +import { workerUrl } from 'fui-worker!./worker_thread/${workerName}_worker_thread'; export class ${WorkerName}WorkerHelper { private worker: ${WorkerName}MainThreadWorker; @@ -24,7 +25,7 @@ export class ${WorkerName}WorkerHelper { /** * 格式化worker url，比如补充一些环境信息到参数里 - * 通过 #hash 传入blob url或 ?params 传入servicePath + * 可通过 #hash 将参数传入blob url * @param url worker url */ private urlFormatter(url: string) { diff --git a/plugins/webpack-fui-worker-plugin/index.js b/plugins/webpack-fui-worker-plugin/index.js index 19f660299..2fa9b3ed0 100644 --- a/plugins/webpack-fui-worker-plugin/index.js +++ b/plugins/webpack-fui-worker-plugin/index.js @@ -5,6 +5,7 @@ const path = require('path'); const webpack = require('webpack'); const { WorkerPluginName } = require('./constants'); +const ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers'); class FuiWorkerPlugin { constructor(options = {}) { @@ -39,6 +40,39 @@ class FuiWorkerPlugin { // 动态添加 worker 的 worker-loader, 命名为 "fui-worker" compiler.options.resolveLoader.alias['fui-worker'] = path.resolve(__dirname, './worker-loader.js'); }); + + // 将FuiWorkerPlugin的参数传递给fui-worker loader + compiler.hooks.compilation.tap(WorkerPluginName, compilation => { + compilation.hooks.normalModuleLoader.tap(WorkerPluginName, (context, module) => { + // 仅提供给fui-worker + const fuiLoader = module.loaders.find(loader => loader.loader.indexOf('fui-worker') !== -1); + + if (fuiLoader) { + const resource = module.resource; + + if (!resource) return; + + // fui-worker通过options读取 + context.options = context.options || {}; + + const index = resource.indexOf('?'); + + if (ModuleFilenameHelpers.matchObject( + this.options, + index < 0 ? resource : resource.substr(0, index) + )) { + for (const key of Object.keys(this.options)) { + // 忽略关键属性 + if (key === "include" || key === "exclude" || key === "test") { + continue; + } + + context.options[key] = this.options[key]; + } + } + } + }) + }) } } diff --git a/plugins/webpack-fui-worker-plugin/worker-loader.js b/plugins/webpack-fui-worker-plugin/worker-loader.js index fd91bb829..dd47d0b70 100644 --- a/plugins/webpack-fui-worker-plugin/worker-loader.js +++ b/plugins/webpack-fui-worker-plugin/worker-loader.js @@ -43,7 +43,7 @@ function loader() { const entryFileName = `${FileNamePrefix}index`; // 获取传递给 loader 的 options - const options = loaderUtils.getOptions(this) || {}; + const options = Object.assign(loaderUtils.getOptions(this) || {}, this.options); // 创建 childCompiler, 用于实现 worker 构建为独立 js 资源 const childCompiler = this._compilation.createChildCompiler(WorkerLoaderName, {