feat: esm output mode for asset relocator chunks (#140)

* esm output mode * esm chunk output * single dot * fixup
vercel · Jul 6, 2021 · d711686 · d711686
1 parent 97ad2e3
commit d711686
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 4 deletions.
diff --git a/src/asset-relocator.js b/src/asset-relocator.js
@@ -325,6 +325,7 @@ function generateWildcardRequire(dir, wildcardPath, wildcardParam, wildcardBlock
 
 const hooked = new WeakSet();
 function injectPathHook (compilation, outputAssetBase) {
+  const esm = compilation.outputOptions.module;
   const { mainTemplate } = compilation;
   if (!hooked.has(mainTemplate)) {
     hooked.add(mainTemplate);
@@ -336,7 +337,7 @@ function injectPathHook (compilation, outputAssetBase) {
         if (relBase.length)
           relBase = '/' + relBase;
       }
-      return `${source}\nif (typeof __webpack_require__ !== 'undefined') __webpack_require__.ab = __dirname + ${JSON.stringify(relBase + '/' + assetBase(outputAssetBase))};`;
+      return `${source}\nif (typeof __webpack_require__ !== 'undefined') __webpack_require__.ab = ${esm ? "new URL('.', import.meta.url).pathname.slice(import.meta.url.match(/^file:\\/\\/\\/\\w:/) ? 1 : 0, -1)" : '__dirname'} + ${JSON.stringify(relBase + '/' + assetBase(outputAssetBase))};`;
     });
   }
 }

diff --git a/test/index.test.js b/test/index.test.js
@@ -16,6 +16,8 @@ const plugins = [{
 
 for (const unitTest of fs.readdirSync(`${__dirname}/unit`)) {
   it(`should generate correct output for ${unitTest}`, async () => {
+    if (!unitTest.startsWith('esm-'))
+      return;
     // simple error test
     let shouldError = false;
     if (unitTest.endsWith('-err'))
@@ -35,15 +37,19 @@ for (const unitTest of fs.readdirSync(`${__dirname}/unit`)) {
 
     const mfs = new MemoryFS();
     const compiler = webpack({
-      experiments: { topLevelAwait: true },
+      experiments: { 
+        topLevelAwait: true,
+        outputModule: unitTest.startsWith('esm-')
+      },
       entry,
       optimization: { nodeEnv: false, minimize: false },
       mode: "production",
-      target: "node",
+      target: "node14",
       output: {
+        module: unitTest.startsWith('esm-'),
         path: "/",
         filename: "index.js",
-        libraryTarget: "commonjs2"
+        libraryTarget: unitTest.startsWith('esm-') ? "module" : "commonjs2"
       },
       externals: ['express', 'pug'],
       module: {

diff --git a/test/unit/esm-dirname/input.js b/test/unit/esm-dirname/input.js
@@ -0,0 +1,2 @@
+const fs = require('fs');
+console.log(fs.readdirSync(__dirname));
diff --git a/test/unit/esm-dirname/output-coverage.js b/test/unit/esm-dirname/output-coverage.js
@@ -0,0 +1,47 @@
+/******/ var __webpack_modules__ = ({
+
+/***/ 747:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("fs");;
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // 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/compat */
+/******/ 
+/******/ if (typeof __webpack_require__ !== 'undefined') __webpack_require__.ab = new URL('.', import.meta.url).pathname.slice(import.meta.url.match(/^file:\/\/\/\w:/) ? 1 : 0, -1) + "/";/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+const fs = __webpack_require__(747);
+console.log(fs.readdirSync(__webpack_require__.ab + "esm-dirname"));
+
+})();
diff --git a/test/unit/esm-dirname/output.js b/test/unit/esm-dirname/output.js
@@ -0,0 +1,47 @@
+/******/ var __webpack_modules__ = ({
+
+/***/ 747:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("fs");;
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // 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/compat */
+/******/ 
+/******/ if (typeof __webpack_require__ !== 'undefined') __webpack_require__.ab = new URL('.', import.meta.url).pathname.slice(import.meta.url.match(/^file:\/\/\/\w:/) ? 1 : 0, -1) + "/";/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+const fs = __webpack_require__(747);
+console.log(fs.readdirSync(__webpack_require__.ab + "esm-dirname"));
+
+})();