Browse Source

KERNEL-12093 feat: worker插件options同步到loader

es6
Austin.Duan 2 years ago
parent
commit
e38e010e32
  1. 7
      bin/cli/worker/template/main_thread.helper.t
  2. 34
      plugins/webpack-fui-worker-plugin/index.js
  3. 2
      plugins/webpack-fui-worker-plugin/worker-loader.js

7
bin/cli/worker/template/main_thread.helper.t

@ -1,7 +1,8 @@
import { ${WorkerName}MainThreadWorker } from './main_thread/${workerName}_main_thread'; import { ${WorkerName}MainThreadWorker } from './main_thread/${workerName}_main_thread';
// 不需要一起打包的话则不需要引入这行 // 不需要一起打包的话则不需要引入这行
// 根据实际需求传入inline属性true -> blob urlfalse -> servicePath // FuiWorkerPlugin中的属性会同步到fui-worker中同时支持loader行内传入属性
import { workerUrl } from 'fui-worker?inline=true!./worker_thread/${workerName}_worker_thread'; // 根据实际需求传入inline返回格式 true -> blob urlfalse -> servicePath
import { workerUrl } from 'fui-worker!./worker_thread/${workerName}_worker_thread';
export class ${WorkerName}WorkerHelper { export class ${WorkerName}WorkerHelper {
private worker: ${WorkerName}MainThreadWorker; private worker: ${WorkerName}MainThreadWorker;
@ -24,7 +25,7 @@ export class ${WorkerName}WorkerHelper {
/** /**
* 格式化worker url比如补充一些环境信息到参数里 * 格式化worker url比如补充一些环境信息到参数里
* 通过 #hash 传入blob url或 ?params 传入servicePath * 通过 #hash 将参数传入blob url
* @param url worker url * @param url worker url
*/ */
private urlFormatter(url: string) { private urlFormatter(url: string) {

34
plugins/webpack-fui-worker-plugin/index.js

@ -5,6 +5,7 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const { WorkerPluginName } = require('./constants'); const { WorkerPluginName } = require('./constants');
const ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers');
class FuiWorkerPlugin { class FuiWorkerPlugin {
constructor(options = {}) { constructor(options = {}) {
@ -39,6 +40,39 @@ class FuiWorkerPlugin {
// 动态添加 worker 的 worker-loader, 命名为 "fui-worker" // 动态添加 worker 的 worker-loader, 命名为 "fui-worker"
compiler.options.resolveLoader.alias['fui-worker'] = path.resolve(__dirname, './worker-loader.js'); 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];
}
}
}
})
})
} }
} }

2
plugins/webpack-fui-worker-plugin/worker-loader.js

@ -43,7 +43,7 @@ function loader() {
const entryFileName = `${FileNamePrefix}index`; const entryFileName = `${FileNamePrefix}index`;
// 获取传递给 loader 的 options // 获取传递给 loader 的 options
const options = loaderUtils.getOptions(this) || {}; const options = Object.assign(loaderUtils.getOptions(this) || {}, this.options);
// 创建 childCompiler, 用于实现 worker 构建为独立 js 资源 // 创建 childCompiler, 用于实现 worker 构建为独立 js 资源
const childCompiler = this._compilation.createChildCompiler(WorkerLoaderName, { const childCompiler = this._compilation.createChildCompiler(WorkerLoaderName, {

Loading…
Cancel
Save