如何在Adobe插件中使用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对话框示例这里开始，并将其转换为Panel --但对话框示例也发生了相同的错误。在这个过程中，package.json和webpack.config.js没有改变，所以libraryTarget仍然是commonjs2。我需要一个额外的插件来解析ES6模块导入吗？

在这里的另一个线程中，没有直接提到Adobe：你能在Adobe插件中使用ES2015+特性(ES6)吗？支持ES6导入和导出。

由于我有一个使用ES6导入和导出的流行代码库，所以我希望将它放到插件中并使用它，而不是用所需的require语句替换每个import语句。

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

谢谢你的帮助。

最好的，丹尼尔

Answer 1

因此，只要您知道如何编写这些导出语句，修复就相当容易了。

在main.js文件中，替换

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

使用

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

如推特上的@kerrishotts：https://twitter.com/kerrishotts/status/1249832641857114114

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