从 ParcelJS 包导入

Question

上下文：

我创建了一个带有索引资源的库，如下所示：

import {X} from '...'
import {Y} from '...'
import {Z} from '...'

export {X, Y, Z}

可以看出，这个文件收集了库的所有公共资源，并根据 ES6 模块标准将它们公开为可访问的入口点。 当我使用 ParcelJs 从索引文件创建一个名为my-library.js的包时，一切正常。

问题：

现在，我想从浏览器中使用库，因此我使用以下脚本创建了 index.html（请注意，此代码不是我的项目的一部分，也不是我想要包含在包中的兴趣。它仅用作时间测试）：

<script type="module">
 import {X} from './my-library.js'
 console.log (X)
</script>

结果，控制台发出以下错误消息：

Uncaught SyntaxError: The requested module './my-library.js' does
not provide an export named 'X'

问题是什么？ ParcelJS 可以用于根据 ES6 规范捆绑一个库，以便在使用来自外部脚本的导入语句时被调用吗？

Answer 1

截至今天（2020 年 8 月），此功能仅在 Parcel2 中提供测试版。 以下是您如何获得您想要的工作：

1. 安装 Parcel2： npm i -g parcel@next
2. 在你的项目中，安装 Babel 核心： npm i @babel/core --save-dev
3. 在您的package.json添加以下配置：

  "main": "dist/legacy/index.js",
  "module": "dist/modern/index.js",
  "targets": {
    "module": {
      "engines": {
        "browsers": [
          "last 1 Chrome version"
        ]
      }
    },
    "main": {
      "engines": {
        "browsers": [
          "> 0.25%"
        ]
      }
    }
  },

4. 构建你的代码： parcel build index.js

dist/legacy/index.js下的 bundle 使用 CommonJS，而dist/modern/index.js下的 bundle 使用 ESM 语法。

注意：将 JS 包捆绑到多个目标的另一种选择是Microbundle 。