如何使用 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模块语法：

{
    "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 的错误。

幸运的是，"externalsType": "import"当前版本的 webpack 支持，尽管它可能比 的效率低"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"
   }
}

Answer 2

答案是还没有实施。我不明白当它不存在时将其记录为存在背后的逻辑。真是浪费时间。

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();
   }
],
experiments: {
    outputModule: true
},
output: {
    path: path.join( __dirname, 'dist' ),
    filename: '[name].js',
    library: {
        type: 'module'
    },
    environment: {
        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
        module: true
    }
}

// Module external type is not implemented yet