从ParcelJS包导入

Question

上下文：

我创建了一个具有如下索引资源的库：

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

export {X, Y, Z}

可以看到，该文件收集了库中的所有公共资源，并根据ES6模块标准将它们作为可访问的入口点公开。当我使用ParcelJ从索引文件创建一个名为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规范捆绑库，以便在使用外部脚本导入语句时调用ES6？

Answer 1

截至目前(2020年8月)，此功能仅在Parcel2的beta版中可用。以下是你如何得到你想要的工作：

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%"
        ]
      }
    }
  },

1. 构建您的代码：parcel build index.js

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

注意:将JS包捆绑到多个目标的另一个选择是微束。