javascript - Webpack + @babel/preset-env 与动态导入... package.module 不被尊重？

Question

我不知道这是预期的行为还是我的配置有问题。据我所知:

• Babel @babel/preset-env 包括 @babel/plugin-syntax-dynamic-import默认情况下
• Webpack 应该“尊重”package.module 字段和 import the corresponding resource

使用此配置:

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-env", {
      "corejs": 3,
      "useBuiltIns": "usage",
      "bugfixes": true
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-typescript", {
      "allowDeclareFields": true
    }],
    "@babel/plugin-proposal-class-properties"
  ]
}

当我动态导入任何库时，会导入错误的文件。例如，对于 vanilla-lazyload 库，在 package.json 中定义以下内容:

{
  "name": "vanilla-lazyload",
  "main": "dist/lazyload.min.js",
  "module": "dist/lazyload.esm.js"
}

导入方式:

import('vanilla-lazyload').then(({ default: LazyLoad }) => { /* use */ });

.... dist/lazyload.min.js 将被捆绑，而不是 dist/lazyload.esm.js。

有什么线索吗？

Answer 1

Babel 不会干扰你的动态导入。这里 Webpack 决定如何解析您导入的模块。

它具有默认的字段顺序，具体取决于您的 webpack 配置目标字段。 (参见https://webpack.js.org/configuration/resolve/#resolvemainfields) 默认顺序是 'browser'、'module' 然后 'main' 并且在您的示例中 vanilla-lazyload 还具有“browser”属性在他们的 package.json ( https://github.com/verlok/vanilla-lazyload/blob/master/package.json#L7 )

{
  "main": "dist/lazyload.min.js",
  "module": "dist/lazyload.esm.js",
  "browser": "dist/lazyload.min.js",
}

您可以通过以下方式覆盖 webpack 的默认顺序

// webpack config
module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'browser', 'main'],
  },
};

如果您不想更改也将应用于其他导入的顺序，则可以使用完整路径: import("vanilla-lazyload/dist/lazyload.esm.min.js") 或者您在 webpack 配置中为其指定别名:

const { resolve } = require("path");
module.exports = {
  resolve: {
    alias: {
      "vanilla-lazyload": resolve("node_modules/vanilla-lazyload/dist/lazyload.esm.min.js"),
    },
  },
}

但是，如果 vanilla-lazyload 的作者决定为浏览器环境使用 .min.js，那么也许您应该向他们咨询 esm 包是否也很好用。例如，它似乎没有被缩小(我已经为此打开了一个 PR)。并且它没有被转译。您必须确保它适用于您的设置/运行环境。