diff --git a/.npmignore b/.npmignore index a5bc0942a..0f0f7d2e4 100644 --- a/.npmignore +++ b/.npmignore @@ -40,3 +40,5 @@ !dist/2.0/bi.min.css !bin/* !bin/**/* +!plugins/* +!plugins/**/* diff --git a/plugins/webpack-fui-worker-plugin/constants.js b/plugins/webpack-fui-worker-plugin/constants.js new file mode 100644 index 000000000..7b80ac3dc --- /dev/null +++ b/plugins/webpack-fui-worker-plugin/constants.js @@ -0,0 +1,9 @@ +const WorkerPluginName = 'FuiWorkerPlugin'; +const WorkerLoaderName = 'FuiWorkerWorkerLoader'; +const FileNamePrefix = 'worker-'; + +module.exports = { + WorkerPluginName, + WorkerLoaderName, + FileNamePrefix, +}; diff --git a/plugins/webpack-fui-worker-plugin/index.js b/plugins/webpack-fui-worker-plugin/index.js new file mode 100644 index 000000000..caa782306 --- /dev/null +++ b/plugins/webpack-fui-worker-plugin/index.js @@ -0,0 +1,45 @@ +/* + * worker-plugin + */ + +const path = require('path'); +const webpack = require('webpack'); +const { WorkerPluginName } = require('./constants'); + +class FuiWorkerPlugin { + constructor(options) { + this.options = options; + } + + apply(compiler) { + // 为主线程构建添加 __WORKER__ 环境变量, 构建中区分不同线程源码, 实现代码拆减 + compiler.hooks.afterPlugins.tap(WorkerPluginName, compiler => { + new webpack.DefinePlugin({ + // __WORKER__ 表示当前所在线程是否是 worker 线程 + // 主线程构建中为 false + __WORKER__: false, + }).apply(compiler); + }); + + // 添加自定义的worker entry-loader + compiler.hooks.afterResolvers.tap(WorkerPluginName, compiler => { + /** + * https://webpack.js.org/configuration/resolve/#resolveloader + * 使用 resolveloader 添加自定义的 worker loader + */ + if (!compiler.options.resolveLoader) { + compiler.options.resolveLoader = { + alias: {}, + }; + } + if (!compiler.options.resolveLoader.alias) { + compiler.options.resolveLoader.alias = {}; + } + + // 动态添加 worker 的 worker-loader, 命名为 "fui-worker" + compiler.options.resolveLoader.alias['fui-worker'] = path.resolve(__dirname, './worker-loader.js'); + }); + } +} + +module.exports = FuiWorkerPlugin; diff --git a/plugins/webpack-fui-worker-plugin/worker-loader.js b/plugins/webpack-fui-worker-plugin/worker-loader.js new file mode 100644 index 000000000..9affe81f4 --- /dev/null +++ b/plugins/webpack-fui-worker-plugin/worker-loader.js @@ -0,0 +1,109 @@ +/* + * fui-worker worker-loader + */ + +const webpack = require('webpack'); +const loaderUtils = require('loader-utils'); +const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin'); +const { WorkerLoaderName, FileNamePrefix } = require('./constants'); + +// 正常 loader 处理逻辑 +function loader() { + const callback = this.async(); + this.cacheable(false); + + // 过滤掉当前的 worker-loader, 保留 worker 侧构建需要的其他 loader(babel-loader/ts-loader 等) + const otherLoaders = this.loaders.filter((loader, index) => { + if (index === this.loaderIndex) { + return false; + } + + return true; + }); + /** + * 拼接构建需要的 loader 字符串, 用于指定 childCompiler 的构建 loader + * 比如: /path/to/babel-loader/lib/index.js!/path/to/ts-loader/index.js! + */ + const loaderPath = otherLoaders.reduce((pre, loader) => `${pre}${loader.path}!`, ''); + + /** + * worker 独立构建的 entry + * 构建 loader + worker 源码入口文件路径 + * + * https://webpack.js.org/concepts/loaders/#inline + * `!!` 实现在 childCompiler 中忽略其他所有 loader, 只保留主构建的 loader + * 不然 worker 入口在 childCompiler 中会继续由 worker-loader 处理, 造成死循环 + */ + const workerEntry = `!!${loaderPath}${this.resourcePath}`; + + // 把资源纳入构建流程的依赖, 实现 dev 模式下的 watch + this.addDependency(workerEntry); + + // 生成的 service 独立 bundle 名称 + const entryFileName = `${FileNamePrefix}index`; + + // 获取传递给 loader 的 options + loaderUtils.getOptions(this) || {}; + + // 创建 childCompiler, 用于实现 worker 构建为独立 js 资源 + const childCompiler = this._compilation.createChildCompiler(WorkerLoaderName, { + globalObject: 'this', + }); + childCompiler.context = this._compiler.context; + + // 指定独立构建的 entry 和生成 js 资源名称 + new SingleEntryPlugin(this.context, workerEntry, entryFileName).apply(childCompiler); + + // 设置 worker 侧的环境变量 + new webpack.DefinePlugin({ + __WORKER__: true, + }).apply(childCompiler); + + // 添加 window 全局对象, 映射为 worker 线程全局对象 self + // 如果在 worker 源码中添加, 可能没有前置到所有引用模块前 + new webpack.BannerPlugin({ + banner: 'self.window = self;', + raw: true, + entryOnly: true, + }).apply(childCompiler); + + const subCache = `subcache ${__dirname} ${workerEntry}`; + childCompiler.hooks.compilation.tap(WorkerLoaderName, compilation => { + if (compilation.cache) { + if (!compilation.cache[subCache]) compilation.cache[subCache] = {}; + compilation.cache = compilation.cache[subCache]; + } + }); + + childCompiler.runAsChild((error, entries, compilation) => { + if (!error && compilation.errors && compilation.errors.length) { + // eslint-disable-next-line no-param-reassign + error = compilation.errors[0]; + } + + // compatible with Array (v4) and Set (v5) prototypes + const entry = entries && entries[0] && entries[0].files.values().next().value; + if (!error && !entry) { + // eslint-disable-next-line no-param-reassign + error = Error(`${WorkerLoaderName}, no entry for ${workerEntry}`); + } + + if (error) { + 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; + ` + ); + }); + + return; +} + +module.exports = loader;