mika-pack-plugin - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

build/bundle.js

 (function (factory) {
-  typeof define === 'function' && define.amd ? define(factory) :
-  factory();
+	typeof define === 'function' && define.amd ? define(factory) :
+	factory();
 })((function () { 'use strict';
 
-  class MyExampleWebpackPlugin {
-    // 定义 `apply` 方法
-    apply(compiler) {
-      // 指定要追加的事件钩子函数
-      compiler.hooks.compile.tapAsync(
-        'afterCompile',
-        (compilation, callback) => {
-          console.log('mika kira kira bling bling ~');
-          console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);
+	class MikaWebpackPlugin {
+	    // 定义 `apply` 方法
+	    apply(compiler) {
+		const simulateRemoteData = key => {
+			const data = {
+				header: "<div>HEADER</div>",
+				footer: "<div>FOOTER</div>",
+			};
+			return Promise.resolve(data[key]);
+		};
+	  // 指定要追加的事件钩子函数
+	   compiler.hooks.emit.tapPromise("MikaWebpackPlugin", compilation => {
+			return new Promise(resolve => {
+				const cache = {};
+				const assetKeys = Object.keys(compilation.assets);
+				for (const key of assetKeys) {
+					const isLastAsset = key === assetKeys[assetKeys.length - 1];
+					if (!/.*\.html$/.test(key)) {
+						if (isLastAsset) resolve();
+						continue;
+					}
+					let target = compilation.assets[key].source();
+					const matchedValues = target.matchAll(/<!-- inject:name="(\S*?)" -->/g); // `matchAll`函数需要`Node v12.0.0`以上
+					const tags = [];
+					for (const item of matchedValues) {
+						const [tag, name] = item;
+						console.log(tag);
+						tags.push({
+							tag,
+							name,
+							data: cache[name] ? cache[name] : simulateRemoteData(name),
+							// data: cache[name],
+						});
+					}
+					console.log(tags);
+					Promise.all(tags.map(item => item.data))
+						.then(res => {
+							res.forEach((data, index) => {
+								const tag = tags[index].tag;
+								const name = tags[index].name;
+								if (!cache[name]) cache[name] = data;
+								target = target.replace(tag, data);
+							});
+						})
+						.then(() => {
+							compilation.assets[key] = {
+								source() {
+									return target;
+								},
+								size() {
+									return this.source().length;
+								},
+							};
+						})
+						.then(() => {
+							if (isLastAsset) resolve();
+						});
+				}
+			});
+		});
+		}
+	}
+	module.exports = MikaWebpackPlugin;
 
-          // 使用 webpack 提供的 plugin API 操作构建结果
-          compilation.addModule(/* ... */);
-
-          callback();
-        }
-      );
-    }
-  }
-  module.exports = MyExampleWebpackPlugin;
-
 }));
 //# sourceMappingURL=bundle.js.map

build/bundle.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"bundle.js","sources":["../src/main.js"],"sourcesContent":["class MyExampleWebpackPlugin {\n  // 定义 `apply` 方法\n  apply(compiler) {\n    // 指定要追加的事件钩子函数\n    compiler.hooks.compile.tapAsync(\n      'afterCompile',\n      (compilation, callback) => {\n        console.log('mika kira kira bling bling ~');\n        console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);\n\n        // 使用 webpack 提供的 plugin API 操作构建结果\n        compilation.addModule(/* ... */);\n\n        callback();\n      }\n    );\n  }\n}\r\nmodule.exports = MyExampleWebpackPlugin;"],"names":[],"mappings":";;;;;EAAA,MAAM,sBAAsB,CAAC;EAC7B;EACA,EAAE,KAAK,CAAC,QAAQ,EAAE;EAClB;EACA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ;EACnC,MAAM,cAAc;EACpB,MAAM,CAAC,WAAW,EAAE,QAAQ,KAAK;EACjC,QAAQ,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAC;EACpD,QAAQ,OAAO,CAAC,GAAG,CAAC,4EAA4E,EAAE,WAAW,CAAC,CAAC;AAC/G;EACA;EACA,QAAQ,WAAW,CAAC,SAAS,WAAW,CAAC;AACzC;EACA,QAAQ,QAAQ,EAAE,CAAC;EACnB,OAAO;EACP,KAAK,CAAC;EACN,GAAG;EACH,CAAC;EACD,MAAM,CAAC,OAAO,GAAG,sBAAsB;;;;;;"}
+{"version":3,"file":"bundle.js","sources":["../src/main.js"],"sourcesContent":["class MikaWebpackPlugin {\n    // 定义 `apply` 方法\n    apply(compiler) {\r\n\tconst simulateRemoteData = key => {\r\n\t\tconst data = {\r\n\t\t\theader: \"<div>HEADER</div>\",\r\n\t\t\tfooter: \"<div>FOOTER</div>\",\r\n\t\t}\r\n\t\treturn Promise.resolve(data[key]);\r\n\t}\r\n  // 指定要追加的事件钩子函数\n   compiler.hooks.emit.tapPromise(\"MikaWebpackPlugin\", compilation => {\n\t\treturn new Promise(resolve => {\n\t\t\tconst cache = {};\n\t\t\tconst assetKeys = Object.keys(compilation.assets);\n\t\t\tfor (const key of assetKeys) {\n\t\t\t\tconst isLastAsset = key === assetKeys[assetKeys.length - 1];\n\t\t\t\tif (!/.*\\.html$/.test(key)) {\n\t\t\t\t\tif (isLastAsset) resolve();\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tlet target = compilation.assets[key].source();\r\n\t\t\t\tconst matchedValues = target.matchAll(/<!-- inject:name=\"(\\S*?)\" -->/g); // `matchAll`函数需要`Node v12.0.0`以上\r\n\t\t\t\tconst tags = [];\n\t\t\t\tfor (const item of matchedValues) {\r\n\t\t\t\t\tconst [tag, name] = item;\r\n\t\t\t\t\tconsole.log(tag)\n\t\t\t\t\ttags.push({\n\t\t\t\t\t\ttag,\n\t\t\t\t\t\tname,\n\t\t\t\t\t\tdata: cache[name] ? cache[name] : simulateRemoteData(name),\r\n\t\t\t\t\t\t// data: cache[name],\n\t\t\t\t\t});\n\t\t\t\t}\r\n\t\t\t\tconsole.log(tags)\n\t\t\t\tPromise.all(tags.map(item => item.data))\n\t\t\t\t\t.then(res => {\n\t\t\t\t\t\tres.forEach((data, index) => {\n\t\t\t\t\t\t\tconst tag = tags[index].tag;\n\t\t\t\t\t\t\tconst name = tags[index].name;\n\t\t\t\t\t\t\tif (!cache[name]) cache[name] = data;\n\t\t\t\t\t\t\ttarget = target.replace(tag, data);\n\t\t\t\t\t\t});\n\t\t\t\t\t})\n\t\t\t\t\t.then(() => {\n\t\t\t\t\t\tcompilation.assets[key] = {\n\t\t\t\t\t\t\tsource() {\n\t\t\t\t\t\t\t\treturn target;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tsize() {\n\t\t\t\t\t\t\t\treturn this.source().length;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t})\n\t\t\t\t\t.then(() => {\n\t\t\t\t\t\tif (isLastAsset) resolve();\n\t\t\t\t\t});\n\t\t\t}\n\t\t});\n\t});\n\t}\n}\r\nmodule.exports = MikaWebpackPlugin;"],"names":[],"mappings":"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"}

package.json

 {
   "name": "mika-pack-plugin",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "daryl",
@@ -5,0 +5,0 @@ "scripts": {

src/main.js

@@ -1,19 +0,63 @@
-class MyExampleWebpackPlugin {
-  // 定义 `apply` 方法
-  apply(compiler) {
-    // 指定要追加的事件钩子函数
-    compiler.hooks.compile.tapAsync(
-      'afterCompile',
-      (compilation, callback) => {
-        console.log('mika kira kira bling bling ~');
-        console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);
-
-        // 使用 webpack 提供的 plugin API 操作构建结果
-        compilation.addModule(/* ... */);
-
-        callback();
-      }
-    );
-  }
+class MikaWebpackPlugin {
+    // 定义 `apply` 方法
+    apply(compiler) {
+	const simulateRemoteData = key => {
+		const data = {
+			header: "<div>HEADER</div>",
+			footer: "<div>FOOTER</div>",
+		}
+		return Promise.resolve(data[key]);
+	}
+  // 指定要追加的事件钩子函数
+   compiler.hooks.emit.tapPromise("MikaWebpackPlugin", compilation => {
+		return new Promise(resolve => {
+			const cache = {};
+			const assetKeys = Object.keys(compilation.assets);
+			for (const key of assetKeys) {
+				const isLastAsset = key === assetKeys[assetKeys.length - 1];
+				if (!/.*\.html$/.test(key)) {
+					if (isLastAsset) resolve();
+					continue;
+				}
+				let target = compilation.assets[key].source();
+				const matchedValues = target.matchAll(/<!-- inject:name="(\S*?)" -->/g); // `matchAll`函数需要`Node v12.0.0`以上
+				const tags = [];
+				for (const item of matchedValues) {
+					const [tag, name] = item;
+					console.log(tag)
+					tags.push({
+						tag,
+						name,
+						data: cache[name] ? cache[name] : simulateRemoteData(name),
+						// data: cache[name],
+					});
+				}
+				console.log(tags)
+				Promise.all(tags.map(item => item.data))
+					.then(res => {
+						res.forEach((data, index) => {
+							const tag = tags[index].tag;
+							const name = tags[index].name;
+							if (!cache[name]) cache[name] = data;
+							target = target.replace(tag, data);
+						});
+					})
+					.then(() => {
+						compilation.assets[key] = {
+							source() {
+								return target;
+							},
+							size() {
+								return this.source().length;
+							},
+						};
+					})
+					.then(() => {
+						if (isLastAsset) resolve();
+					});
+			}
+		});
+	});
+	}
 }
-module.exports = MyExampleWebpackPlugin;
+module.exports = MikaWebpackPlugin;

No alert changes

Improved metrics

Total package byte prevSize

9206

149.28%

Lines of code

141

187.76%

No dependency changes