Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

consume bundled by webpack esm library #15608

Merged
merged 2 commits into from Apr 12, 2023
Merged

consume bundled by webpack esm library #15608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3702129
consume esm bundled library
vankop Mar 31, 2022
c5647a9
Merge branch 'main' into fix/consume-esm-bundled-library
vankop Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 27 additions & 10 deletions lib/CompatibilityPlugin.js
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@ const ConstDependency = require("./dependencies/ConstDependency");
/** @typedef {import("./Compiler")} Compiler */
/** @typedef {import("./javascript/JavascriptParser")} JavascriptParser */

const nestedWebpackRequireTag = Symbol("nested __webpack_require__");
const nestedWebpackIdentifierTag = Symbol("nested webpack identifier");
const PLUGIN_NAME = "CompatibilityPlugin";

class CompatibilityPlugin {
Expand Down Expand Up @@ -82,22 +82,26 @@ class CompatibilityPlugin {
statement.id.name === "__webpack_require__"
) {
const newName = `__nested_webpack_require_${statement.range[0]}__`;
parser.tagVariable(statement.id.name, nestedWebpackRequireTag, {
name: newName,
declaration: {
updated: false,
loc: statement.id.loc,
range: statement.id.range
parser.tagVariable(
statement.id.name,
nestedWebpackIdentifierTag,
{
name: newName,
declaration: {
updated: false,
loc: statement.id.loc,
range: statement.id.range
}
}
});
);
return true;
}
});
parser.hooks.pattern
.for("__webpack_require__")
.tap(PLUGIN_NAME, pattern => {
const newName = `__nested_webpack_require_${pattern.range[0]}__`;
parser.tagVariable(pattern.name, nestedWebpackRequireTag, {
parser.tagVariable(pattern.name, nestedWebpackIdentifierTag, {
name: newName,
declaration: {
updated: false,
Expand All @@ -107,8 +111,21 @@ class CompatibilityPlugin {
});
return true;
});
parser.hooks.pattern
.for("__webpack_exports__")
.tap(PLUGIN_NAME, pattern => {
parser.tagVariable(pattern.name, nestedWebpackIdentifierTag, {
name: "__nested_webpack_exports__",
declaration: {
updated: false,
loc: pattern.loc,
range: pattern.range
}
});
return true;
});
parser.hooks.expression
.for(nestedWebpackRequireTag)
.for(nestedWebpackIdentifierTag)
.tap(PLUGIN_NAME, expr => {
const { name, declaration } = parser.currentTagData;
if (!declaration.updated) {
Expand Down
5 changes: 5 additions & 0 deletions test/configCases/output-module/reuse-webpack-esm-library/index.js
View file
Open in desktop
@@ -0,0 +1,5 @@
import { useCall } from "./lib";

it("should compile and run", () => {
expect(useCall()).toBe(1);
});
95 changes: 95 additions & 0 deletions test/configCases/output-module/reuse-webpack-esm-library/lib.js
View file
Open in desktop
@@ -0,0 +1,95 @@
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
/******/ var __webpack_modules__ = ({

/***/ "react":
/*!************************!*\
!*** external "react" ***!
\************************/
/***/ ((module) => {

var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
var y = x => () => x
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;

/***/ })

/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!***************************!*\
!*** ./src/store/call.ts ***!
\***************************/
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "useCall": () => (/* binding */ useCall),
/* harmony export */ "withCallManager": () => (/* binding */ withCallManager)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");

function withCallManager() {
return react__WEBPACK_IMPORTED_MODULE_0__.createElement(1);
}
function useCall() {
return withCallManager();
}
})();

var __webpack_exports__useCall = __webpack_exports__.useCall;
var __webpack_exports__withCallManager = __webpack_exports__.withCallManager;
export { __webpack_exports__useCall as useCall, __webpack_exports__withCallManager as withCallManager };
1 change: 1 addition & 0 deletions test/configCases/output-module/reuse-webpack-esm-library/react.js
View file
Open in desktop
@@ -0,0 +1 @@
export function createElement(a) { return a; }
14 changes: 14 additions & 0 deletions test/configCases/output-module/reuse-webpack-esm-library/webpack.config.js
View file
Open in desktop
@@ -0,0 +1,14 @@
const path = require("path");
/** @type {import("../../../../").Configuration} */
module.exports = {
mode: "development",
devtool: "eval",
optimization: {
concatenateModules: false
},
resolve: {
alias: {
react: path.resolve(__dirname, "react")
}
}
};