我正在撰寫插件,它內嵌了一些代碼。而且我在使用內部 webpack 插件時遇到了麻煩
介紹
我的目標是轉譯此代碼
// a.js
export const getFoo = x => x.foo;
// b.js
import {getFoo} from './a.js';
export const func = x => getFoo(x);
對這個
// b.js
export const func = x => x.foo;
使用此評論我實作了這樣的邏輯
- 掛鉤
compiler.hooks.beforeCompile并找到所有匯入的轉譯模塊parser.hooks.importSpecifier和 - 然后使用相同的
compiler鉤子,我找到所有的CallExpressions 并記住所有將被轉換的函式及其位置 - 在
compiler.hooks.compilation在compilation.hooks.buildModule我添加模板依賴,這將取代MemberExpression CallExpressions
問題
Webpack 有內部插件HarmonyImportSpecifierDependency。顯然,它執行相同的邏輯替換
import {getFoo} from './a.js';
export const func = x => x.foo;
和
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return func; });
/* harmony import */ var _getters_uno__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
const func = x => {
// NEXT LINE IS THE RESULT OF `HarmonyImportSpecifierDependency` WORK
return Object(_getters_uno__WEBPACK_IMPORTED_MODULE_0__[/* getFoo */ "e"])(x);
};
我的問題是這兩個插件(我的和HarmonyImportSpecifierDependency)都記得CallExpressions的原始來源和原始位置。兩個插件的結果都是無效代碼:
return Object(_getters_uno__WEBPACK_IMPORTED_MODULE_0__[/* getFoo */ "e"])x.foo);
問題
有沒有辦法給出HarmonyImportSpecifierDependency我的插件的結果?我試圖在compilation階段重新決議模塊,但沒有成功
uj5u.com熱心網友回復:
我解決了replacements在succeedBuild鉤子中修補源中的物件的問題
source.replacements = source.replacements
.filter(r => !r.content.includes(`/* ${callExpression.callee.name} */`));
還是想知道有沒有更好的解決方案
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/372547.html
