From c6d61247b31e47b4d2ca5e2436ee59b7eae84461 Mon Sep 17 00:00:00 2001 From: tedjmzhang Date: Mon, 24 Jun 2024 16:48:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E5=AD=A6-=E5=90=91=E9=87=8F=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 ++++ package.json | 1 + .../library/enhanced-resolve/index.js | 26 ++++++++++ .../library/enhanced-resolve/index.md | 14 ++++++ src/frontend/library/tapable/index.js | 50 +++++++++++++++++-- src/frontend/library/webpack/index.md | 17 ++++++- .../\345\220\221\351\207\217/index.js" | 45 +++++++++++++++++ 7 files changed, 156 insertions(+), 6 deletions(-) create mode 100644 src/frontend/library/enhanced-resolve/index.js create mode 100644 src/frontend/library/enhanced-resolve/index.md create mode 100644 "src/\346\225\260\345\255\246/\345\220\221\351\207\217/index.js" diff --git a/package-lock.json b/package-lock.json index fbec5dd..f4fb491 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1242,6 +1242,15 @@ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" }, + "enhanced-resolve": { + "version": "5.17.0", + "resolved": "https://mirrors.cloud.tencent.com/npm/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", + "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", + "requires": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + } + }, "entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", diff --git a/package.json b/package.json index 3b49b30..36d0f2a 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "ajv": "^8.16.0", "chalk": "^5.3.0", "commander": "^12.1.0", + "enhanced-resolve": "^5.17.0", "gogocode": "^1.0.55", "handlebars": "^4.7.8", "inquirer": "^8.2.6", diff --git a/src/frontend/library/enhanced-resolve/index.js b/src/frontend/library/enhanced-resolve/index.js new file mode 100644 index 0000000..9c47eb4 --- /dev/null +++ b/src/frontend/library/enhanced-resolve/index.js @@ -0,0 +1,26 @@ +const resolve = require("enhanced-resolve"); +const path =require('path') + +// resolve("/some/path/to/folder", "module/dir", (err, result) => { +// result; // === "/some/path/node_modules/module/dir/index.js" +// }); +console.log(__dirname); // /Users/zhangjiaming/code/learn/blog/src/frontend/library/enhanced-resolve +let res = resolve.sync(__dirname, "asap"); // /Users/zhangjiaming/code/learn/blog/node_modules/asap/asap.js +let res2 = resolve.sync(__dirname, "esbuild"); // /Users/zhangjiaming/code/learn/blog/node_modules/esbuild/lib/main.js +console.log(res); +console.log(res2); + +const myResolve = resolve.create({ + // or resolve.create.sync + extensions: [".ts", ".js"], + alias: { + "@": __dirname + } + // see more options below +}); + +let res3 = myResolve('/', "@/index", (err, result) => { + if(err) throw err + console.log('res3', result); +}); + diff --git a/src/frontend/library/enhanced-resolve/index.md b/src/frontend/library/enhanced-resolve/index.md new file mode 100644 index 0000000..a7c33d5 --- /dev/null +++ b/src/frontend/library/enhanced-resolve/index.md @@ -0,0 +1,14 @@ +# enhanced-resolve 获取绝对路径，用来处理模块引用的 +[通过可以设置各种配置，例如别名，根路径等](https://www.npmjs.com/package/enhanced-resolve) + +``` +// webpack使用该库处理成xxx/node_modules/moduleA/xxx, 后面的xxx是该库的package.json里面的main定义的 +import moduleA from 'moduleA' + +// 处理相对路径 xxx/moduleB/xxx.[ext] +import moduleB from './moduleB' + + + +``` + diff --git a/src/frontend/library/tapable/index.js b/src/frontend/library/tapable/index.js index 8746750..78181ac 100644 --- a/src/frontend/library/tapable/index.js +++ b/src/frontend/library/tapable/index.js @@ -1,7 +1,8 @@ -let { SyncHook, AsyncSeriesHook } = require('tapable'); +let { SyncHook, AsyncSeriesHook, SyncBailHook } = require('tapable'); let syncHook = new SyncHook(['param1', 'param2']); let asyncSeriesHook = new AsyncSeriesHook(['param1', 'param2']); +let syncBailHook = new SyncBailHook(['param1', 'param2']); syncHook.tap({ name: '1 third hook', @@ -62,7 +63,7 @@ asyncSeriesHook.tapAsync({ asyncSeriesHook.tapPromise({ name: '3 hook', stage: 3 -}, async function (param, other, callback) { +}, async function (param, other, callback) { fetch() // 异步获取些东西 console.log('3 hook', param, other); callback(); @@ -77,12 +78,29 @@ asyncSeriesHook.tapPromise({ }) // console.log(asyncSeriesHook.callAsync.toString()); -asyncSeriesHook.promise(1111, 2222).then((res) => { - console.log('ok', res); -}).catch(err => console.log('something wrong', err)) +// asyncSeriesHook.promise(1111, 2222).then((res) => { +// console.log('ok', res); +// }).catch(err => console.log('something wrong', err)) +syncBailHook.tap({ + name: '1 third hook', + stage: 1 +}, function (param, other) { + console.log('first param2', param, other); + return 11 +}) +syncBailHook.tap({ + name: 'first hook', + stage: 11 +}, function (param, other) { + console.log('first param', param, other) +}) +let res = syncBailHook.call('bail', 'bail2'); +console.log(res) + + @@ -211,4 +229,26 @@ function anonymous3(param1, param2 _sync = false; })); +} + +// bail的hook需要返回undefined才能继续执行，不然直接用返回值结束了 +function syncBailHookFn(param1, param2 +) { + "use strict"; + var _context; + var _x = this._x; + var _fn0 = _x[0]; + var _result0 = _fn0(param1, param2); + if (_result0 !== undefined) { + return _result0; + ; + } else { + var _fn1 = _x[1]; + var _result1 = _fn1(param1, param2); + if (_result1 !== undefined) { + return _result1; + ; + } else { + } + } } \ No newline at end of file diff --git a/src/frontend/library/webpack/index.md b/src/frontend/library/webpack/index.md index 3b749ee..11b5f58 100644 --- a/src/frontend/library/webpack/index.md +++ b/src/frontend/library/webpack/index.md @@ -9,4 +9,19 @@ webpack内部原生支持转换javascript（使用acorn作为parser）， ## 开冲 -1. \ No newline at end of file +1. Compiler实例 +保存传入的参数options，调用compiler.run调用hooks之后，执行compiler.compile生成Compilation实例，存在this.compilation中 + +2. Compilation实例 +调用compilation + + +流程 + +1. 调用webpack()会生成Compiler实例，生成的时候会添加各种hooks(JavascriptModulesPlugin，CssModulesPlugin，EntryOptionPlugin...), +调用compiler.run()会触发compiler的hooks，然后调用compiler.create()生成compilation实例。 +2. compiler.hooks.make.callAsync()调用make的hooks，包含了EntryOptionPlugin,参数为compilation +3. compilation实例添加属性compilation.factorizeQueue=new AsyncQueue()。 +AsyncQueue：自身包含hooks，例如asyncQueue.hooks.beforeAdd。调用了asyncQueue.add之后会在加上setImmediate(syncQueue._root._ensureProcessing)（事件循环末尾），会遍历syncQueue._children里面的所有child， +调用child._startProcessing(entry) +4. setImmediate diff --git "a/src/\346\225\260\345\255\246/\345\220\221\351\207\217/index.js" "b/src/\346\225\260\345\255\246/\345\220\221\351\207\217/index.js" new file mode 100644 index 0000000..5712f1d --- /dev/null +++ "b/src/\346\225\260\345\255\246/\345\220\221\351\207\217/index.js" @@ -0,0 +1,45 @@ +// 公式: 向量a.向量b = |a||b|cosAngle。 +// 公式：向量a.向量b = (a.X * b.X) + (b.Y * b.Y) +// 结合两者可以求出cosAngle，然后求出比例ratio + +/** + * @typedef Point + * @property {number} latitude + * @property {number} longitude + */ + +/** + * @desc: 求其他点在起终点对应直线的投影（ps: 常用地理坐标系是二维坐标系） + * @param {Point} startPoint 起点 + * @param {Point} endPoint 终点 + * @param {Point} point 其他点 + */ +function getAbsorbPoint(startPoint, endPoint, point) { + const { + longitude: sX, + latitude: sY + } = startPoint + const { + longitude: eX, + latitude: eY + } = endPoint + const { + longitude: pX, + latitude: pY + } = point + + let so = [sX, sY]; // 向量so，从原点o指向startPoint + let eo = [eX, eY]; // 向量eo，从原点o指向endPoint + let po = [pX, pY]; // 向量po，从原点o指向point + let es = [eo[0] - so[0], eo[1] - so[1]]; // 向量es，由向量eo - 向量so + let ps = [po[0] - so[0], po[1] - so[1]]; // 向量ps，由向量po - 向量so + let esMang = Math.sqrt(Math.pow(es[0], 2) + Math.pow(es[1], 2)) // 向量es的模 + let psMang = Math.sqrt(Math.pow(ps[0], 2) + Math.pow(ps[1], 2)) // 向量ps的模 + + let cosAngle = (es[0] * ps[0] + es[1] * ps[1]) / esMang / psMang; + let ratio = psMang * cosAngle / esMang; // 其实就是(es[0] * ps[0] + es[1] * ps[1]) / Math.pow(esMang, 2) + return { + longitude: sX + ratio * es[0], + latitude: sY + ratio * es[1] + } +} \ No newline at end of file