webpack - 如何使用 webpack externalsType 模块

Question

没有关于在使用 externalsType = module 时如何声明外部本身的文档，所以我一直在尝试我能想到的一切。

这是一个适用于不导出 ES6 模块的 CDN 版本的版本。

{
    "experiments": { outputModule: true },
    "output": {
         "path": path.join( __dirname, 'dist' ),
         "[name].mjs",
         "library": { type: "module" }
    }
   "externalsType": "var",
   "externals": {
       "/local/library.min.js": "library"  <-- this is the non-ES6-module version of the CDN
   }
}

// builds the correct output files

我想要做的实际上是导入 CDN 的 ES6 模块版本。

我尝试过的无数事情:

1.

   "externalsType": "module",
   "externals": {
       "/local/library.min.mjs": "https://cdn-path/library.min.mjs"
   }

// The target environment doesn't support EcmaScriptModule syntax so it's not possible to use external type 'module' while analysing module external "https://cdn-path/library.min.mjs" for concatenation

   "externalsType": "module",
   "externals": {
       "/local/library.min.mjs": "library@https://cdn-path/library.min.mjs"
   }

// The target environment doesn't support EcmaScriptModule syntax so it's not possible to use external type 'module' while analysing module external "library@https://cdn-path/library.min.mjs" for concatenation

   "externalsType": "module",
   "externals": {
       "/local/library.min.mjs": "import library from https://cdn-path/library.min.mjs"
   }

// The target environment doesn't support 'import()' so it's not possible to use external type 'import'

   "externalsType": "import",
   "externals": {
       "/local/library.min.mjs": "import library from https://cdn-path/library.min.mjs"
   }

// The target environment doesn't support 'import()' so it's not possible to use external type 'import'

   "externalsType": "module",
   "externals": {
       "/local/library.min.mjs": "import * from https://cdn-path/library.min.mjs"
   }

// The target environment doesn't support 'import()' so it's not possible to use external type 'import'

    externalsType: 'module',
    externals: [
        function( { _context, request }, callback ) {
            if ( request === '/local/library.min.mjs' ) {
                return callback( null, 'https://cdn-path/library.min.mjs', 'module' );
            }
            return callback();
        }
    ]

// The target environment doesn't support EcmaScriptModule syntax so it's not possible to use external type 'module' while analysing module external "https://cdn-path/library.min.mjs" for concatenation

我查看了 webpack 源代码，但找不到任何为此编写的内容。

如果今天没有人能回答这个问题，我已经写好了一份错误报告并准备提交。感谢您的帮助。

Answer 1

通过查看 webpack 的源代码，我发现你需要将 output.environment.module 设置为 true 来告诉你的环境支持 webpack ECMAScript Module 语法:

{
    "experiments": { outputModule: true },
    "output": {
         "path": path.join( __dirname, 'dist' ),
         "library": { type: "module" },
         environment: { module: true },
    }
   "externalsType": "module",
   "externals": {
       "/local/library.min.js": "https://cdn-path/library.min.mjs"
   }
}

但是，在当前版本的 webpack(v5.38.1) 中，"externalsType": "module" 根本没有实现，所以你仍然会得到 webpack 的错误。

幸运的是，当前版本的 webpack 支持 "externalsType": "import"，尽管它的效率可能低于 "externalsType": "module" (它使用动态导入而不是导入)。作为一种解决方法，我们现在可以使用 "externalsType": "import":

{
    "experiments": { outputModule: true },
    "output": {
         "path": path.join( __dirname, 'dist' ),
         "library": { type: "module" },
         environment: {
           module: true,
           dynamicImport: true,   // Note you need to enable `dynamicImport ` here
         },
    }
   "externalsType": "import",
   "externals": {
       "/local/library.min.js": "https://cdn-path/library.min.mjs"
   }
}