javascript - 如何在 Adob​​e XD 插件中使用 ES6 模块？

Question

我想知道是否可以在我的 XD 插件中使用 ES6 导入。

每当我使用 import Vue from 'vue' 时，构建任务都会成功完成，但是，XD 在加载插件时会在开发人员控制台中抛出错误:

Plugin Error: Error loading plugin <settings>/develop/my_plugin
Plugin TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (<settings>/develop/my_plugin/main.js:14367:16)
    at Module../src/router.js (<settings>/develop/my_plugin/main.js:14368:30)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at Object../src/main.js (<settings>/develop/my_plugin/main.js:14267:16)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at <settings>/develop/my_plugin/main.js:85:18
    at <settings>/develop/my_plugin/main.js:88:10
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:3563)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:1015)
    at d.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/pluginmanager/src/js/pluginmanager_scripts.js:95:2060)
    at convertPluginErrorToString (plugins/PluginErrorUtil.js:1:198)
    at safeGetStackTrace (plugins/PluginErrorUtil.js:1:339)
    at internalFormatPluginError (plugins/PluginErrorUtil.js:1:1073)
    at internalReportPluginError (plugins/PluginErrorUtil.js:1:1171)
    at Object.reportPluginError (plugins/PluginErrorUtil.js:1:1603)
    at loadPlugin (plugins/PluginLoader.js:1:1277)
    at plugins/PluginLoader.js:1:8993
    at Array.forEach (<anonymous>)
    at reloadPlugins (plugins/PluginLoader.js:1:8967)
    at Artwork.history.waitForCurrentEditBatch.then (plugins/PluginLoader.js:1:9642)

我从 Hello Vue Dialog 示例开始 here并将其转换为面板 - 但对话框示例会发生相同的错误。 package.json 和 webpack.config.js 在此过程中没有更改，因此 libraryTarget 仍然是 commonjs2。我需要额外的插件来解决 ES6 模块导入问题吗？

在此处的另一个线程中，并未直接提到 Adob​​e XD 支持 ES6 导入和导出:Can you use ES2015+ features (ES6) in Adobe XD plugins?

由于我有一个使用 ES6 导入和导出的流行代码库，我想将其放入插件中并在插件中使用它，而不用所需的 require< 替换每个 import 语句 声明。

如果需要，我可以提供一个最小的示例。

感谢您的帮助。

最好， 丹尼尔

Answer 1

所以修复相当简单 - 只要您知道如何编写这些导出语句。

在main.js文件中，替换

module.exports = {
    panels: {
        mainPanel: { show, hide, update }
      }
};

与

export const panels = {
    mainPanel: { show, hide, update }
}

根据 Twitter 上的 @kerrishotts:https://twitter.com/kerrishotts/status/1249832641857114114

从那时起，您可以在项目中使用 import 和 export 语句。